Comment afficher / masquer les composants ReactJS

À essayer d'apprendre ReactJS.. mais ce qui me confond est le rendu du composant. Tous les exemples que j'ai vu définit une Réagir la classe du composant et à la fin a quelque chose comme:

React.renderComponent(
  <comp attr="value"" />,
  document.getElementById('comp')
);

Je comprends qu'il remplace le 'comp' élément avec mon composant.. c'est super. Mais il semble que si je charge 20 composants, tous les 20 de rendu. Cependant, je veux seulement rendre certains et pas tous, mais une utilisation tout au long de mon SPA. Je suis à l'aide de DirectorJS routeur, et selon si un utilisateur se connecte ou non, et/ou à certains liens, je veux seulement montrer l'un des composants. Je n'arrive pas à trouver de l'info/exemples/tutoriels sur la façon de gérer de manière dynamique en affichant ou en masquant réagir composants. Plus encore, ce que j'aimerais vraiment faire est de charger les partiels en fonction sur les liens cliqués et dans ces partiels qu'ils utiliseraient réagir composants, de sorte qu'à ce temps de chargement/utilisation du composant. Est-ce possible..si oui, comment pourrais-je gérer cela? Je pourrais vivre avec chargement 20+ composants une fois le premier moment du chargement de l'application, mais je préfère ne charge que si l'partielle d'un composant est affiché sur est chargé.

source d'informationauteur user3317868

  1. 26

    Tout d'abord, rendre uniquement ce qui est nécessaire. Il est plus facile de suivre et c'est plus rapide.

    À fait "basculer entre les pages", c'est aussi simple que, eh bien, la définition d'une variable dans votre état ou les accessoires, et utiliser la var conditionnelle, le rendu de ce que vous avez besoin. Le rôle de manière sélective le rendu de ce que vous voulez naturellement va pour le composant parent. Voici un travail de violon avec le Directeur: http://jsfiddle.net/L7mua/3/

    Partie de la clé, dans l'App:

    render: function() {
  var partial;
  if (this.state.currentPage === 'home') {
    partial = <Home />;
  } else if (this.state.currentPage === 'bio') {
    partial = <Bio />;
  } else {
    //dunno, your default page
    //if you don't assign anything to partial here, you'll render nothing
    //(undefined). In another situation you'd use the same concept to
    //toggle between show/hide, aka render something/undefined (or null)
  }
  return (
    <div>
      <div>I am a menu that stays here</div>
      <a href="#/home">Home</a> <a href="#/bio">Bio</a>
      {partial}
    </div>
  );
}

    Avis qu'au-delà de la version HTML de la recherche JSX syntaxe, vous êtes vraiment seulement à l'aide de JavaScript. Des conditions encore du travail, itérations encore du travail, etc.