Come mostrare / nascondere i componenti ReactJS

Question

Cercando di imparare i reactjs .. Ma ciò che mi confonde è il rendering del componente. Ogni esempio che ho visto definisce una classe di componenti reagire e alla fine ha qualcosa come:

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

.

Capisco che sostituisce l'elemento 'comp' con il mio componente .. è fantastico. Ma sembra se carico 20 componenti, tutti i 20 rendono. Tuttavia, voglio solo rendere alcuni e non tutti, ma usare tutto in tutta la mia spa. Sto usando il router di Directorjs, e a seconda se un utente accede o meno, e / o va a determinati collegamenti, voglio mostrare solo uno o meno componenti. Non riesco a trovare alcuna informazione / esempi / tutorial su come gestire dinamicamente mostrando o nascondere i componenti reagire. Più così, quello che mi piacerebbe davvero fare è caricare parziali a seconda dei collegamenti fatti cliccati e in quegli parziali userebbero i componenti reagire, quindi solo in quel momento caricare / utilizzare il componente. È possibile ... se quindi come potrei gestire questo? Potrei vivere con il caricamento di 20+ componenti una volta la prima volta che l'app è caricata, ma preferirei caricarle solo se il componente parziale viene visualizzato viene caricato.

Answer 1

In primo luogo, rende solo ciò che è necessario.È più facile da tracciare ed è più veloce.

In realtà "Scambia tra le pagine", è così semplice come, bene, impostare una variabile nel tuo stato / oggetti di scena e utilizzare quel var per rendering con condizionatamente tutto ciò di cui hai bisogno.Il ruolo di rendering selettivamente tutto ciò che si desidera naturalmente vada al componente principale.Ecco un violino funzionante con regista: http://jsfiddle.net/l7mua/3/

Parte chiave, in 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>
  );
}

.

Si noti che oltre la sintassi JSX dall'aspetto HTML, stai solo usando JavaScript.I condizionali funzionano ancora, iterazioni funzionano ancora, ecc.