Como mostrar/ocultar componentes ReactJS

Question

Tentando aprender ReactJS..mas o que me confunde é a renderização do componente.Cada exemplo que vi define uma classe de componente React e no final tem algo como:

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

Entendo que ele substitui o elemento 'comp' pelo meu componente.isso é ótimo.Mas parece que se eu carregar 20 componentes, todos os 20 serão renderizados.Porém, quero renderizar apenas alguns e não todos, mas usar tudo em todo o meu SPA.Estou usando o roteador DirectorJS e, dependendo se um usuário efetua login ou não e/ou acessa determinados links, quero mostrar apenas um ou mais componentes.Não consigo encontrar nenhuma informação/exemplo/tutorial sobre como gerenciar dinamicamente a exibição ou ocultação de componentes de reação.Mais ainda, o que eu realmente gostaria de fazer é carregar parciais dependendo dos links clicados e nesses parciais eles usariam componentes de reação, então somente nesse momento carregar/usar o componente.Isso é possível... em caso afirmativo, como posso lidar com isso?Eu poderia conviver carregando mais de 20 componentes uma vez na primeira vez que o aplicativo for carregado, mas prefiro carregá-los apenas se a parte parcial em que um componente é exibido estiver carregada.

Answer 1

Primeiro, renderize apenas o que for necessário.É mais fácil de rastrear e mais rápido.

Para realmente "trocar entre páginas", é tão simples quanto definir uma variável em seu estado/adereços e usar essa var para renderizar condicionalmente o que você precisa.A função de renderizar seletivamente o que você deseja vai naturalmente para o componente pai.Aqui está um violino de trabalho com o Diretor: http://jsfiddle.net/L7mua/3/

Parte principal, no aplicativo:

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

Observe que, além da sintaxe JSX com aparência de HTML, você está apenas usando JavaScript.Condicionais ainda funcionam, iterações ainda funcionam, etc.