Comment montrer / masquer les composants ReactJS

Question

essayer d'apprendre réactjs .. Mais ce qui me confond est le rendu du composant. Chaque exemple que j'ai vu définit une classe de composants réactifs et à la fin a quelque chose comme:

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

Je comprends qu'il remplace l'élément "Comp" avec mon composant. C'est génial. Mais il semble que je charge 20 composants, tous les 20 rendent. Cependant, je veux seulement rendre certains et pas tous, mais utilisez tout au long de mon spa. J'utilise le routeur DirectorJS et, selon le moment où un utilisateur se connecte ou non, et / ou va à certains liens, je veux seulement montrer une ou deux composants. Je n'arrive pas à trouver d'informations / exemples / tutoriels sur la manière de gérer de manière dynamique montrant ou masquant des composants réagissant. En savoir plus, ce que j'aimerais vraiment faire est de charger les partiels en fonction des liens cliqués et dans ces partiels, ils utiliseraient des composants de réagisme, donc seulement à cette époque charger / utiliser le composant. Est-ce possible..Si alors comment puis-je gérer cela? Je pourrais vivre avec chargement de plus de 20 composants une fois la première fois que l'application est chargée, mais je préférerais ne les charger que si le composant partiel est affiché sur est chargé.

Answer 1

Tout d'abord, resserrer ce qui est nécessaire.Il est plus facile de suivre et il est plus rapide.

Pour réellement "échanger entre les pages", c'est aussi simple que, bien, définissant une variable dans votre état / accessoires, et utilisez ce Var pour rendre conditionnellement ce dont vous avez besoin.Le rôle de rendu sélectivement ce que vous voulez naturellement va sur le composant parent.Voici un violon de travail avec le réalisateur: http://jsfiddle.net/l7mua/3/

partie clé, dans l'application:

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>
  );
}

Notez que au-delà de la syntaxe JSX de la recherche HTML, vous utilisez vraiment JavaScript.Les conditionnels travaillent toujours, les itérations travaillent toujours, etc.