Cómo mostrar / ocultar los componentes de reactjs

Question

Tratando de aprender reaccjs. Pero lo que me confunde es la representación del componente. Cada ejemplo que he visto define una clase de componentes de reacción y al final tiene algo así:

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

Entiendo que reemplaza el elemento 'Comp' con mi componente. Eso es genial. Pero parece que si carga 20 componentes, los 20 rinden. Sin embargo, solo quiero hacer algo y no a todos, pero use todo a lo largo de mi spa. Estoy usando DirectJS Router, y dependiendo de si un usuario inicia sesión o no, y / o va a ciertos enlaces, quiero mostrar solo uno o así de componentes. Parece que no puedo encontrar ninguna información / ejemplos / tutoriales sobre cómo administrar dinámicamente mostrar o esconder componentes reaccionar. Más aún, lo que realmente me gustaría hacer es cargar parciales dependiendo de los enlaces hinchados y en aquellos parciales que usarían componentes de reacción, por lo que solo en ese momento cargar / usar el componente. ¿Es esto posible ... si entonces, ¿cómo puedo manejar esto? Podría vivir con la carga de 20+ componentes una vez la primera vez que se carga la aplicación, pero prefiero cargarlos si se muestra el componente parcial a se muestra un componente.

Answer 1

primero, rinda solo lo que es necesario.Es más fácil rastrear y es más rápido.

Para "cambiar entre páginas", es tan simple como, bueno, establecer una variable en su estado / accesorios, y usar ese var para hacer condicionalmente lo que necesite.El papel de la representación selectiva de lo que quiera, naturalmente, va al componente principal.Aquí hay un violín de trabajo con Director: http://jsfiddle.net/l7mua/3/

parte clave, en la aplicación:

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 más allá de la sintaxis JSX de aspecto HTML, realmente está utilizando JavaScript.Los condicionales aún funcionan, las iteraciones aún funcionan, etc.