如何显示/隐藏Reactjs组件

Question

试图学习Reactjs ..但是让我混淆是组件的渲染。我见过的每一个例子都定义了反应组件类，最后有类似的东西：

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

.

我明白它用我的组件替换了'comp'元素..这很棒。但似乎如果我加载20个组件，所有20件渲染。但是，我只想渲染一些而不是全部，而是在整个水疗中心使用。我正在使用Directrjs路由器，并且取决于用户登录或不在某些链接登录，我只想显示一个或如此组件。似乎无法找到有关如何动态管理显示或隐藏React组件的信息/示例/教程。如此，我真正想做的是加载部分，具体取决于点击的链接以及它们将使用React组件的部分，所以只有在该时间加载/使用组件。这可能是可能的吗？我怎么能处理这个问题？我可以在加载应用程序第一次加载20多个组件时居住，但如果填充了部分组件，我更愿意加载它们。

Answer 1

首先，渲染只有必要的内容。跟踪更容易，它更快。

实际上“在页面之间交换”，它可以简单，嗯，在您的状态/道具中设置变量，并使用该变量根据您需要的无条件呈现。选择性地呈现您想要的作用自然地转到父组件。这是一个有导演的工作小提琴： http://jsfiddle.net/l7mua/3/

关键部分，在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>
  );
}

.

注意，超出了HTML寻找的JSX语法，您真的只是使用JavaScript。条件仍然工作，迭代仍然工作等等。