如何显示/隐藏ReactJS组件

尝试学习 ReactJS.. 但令我困惑的是组件的渲染。我见过的每个例子都定义了一个 React 组件类，最后有类似的内容：

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

我知道它用我的组件替换了“comp”元素......这很棒。但似乎如果我加载 20 个组件，所有 20 个都会渲染。然而，我只想渲染部分而不是全部，但在我的 SPA 中使用全部。我正在使用 DirectorJS 路由器，根据用户是否登录和/或访问某些链接，我只想显示一个或多个组件。我似乎找不到任何有关如何动态管理显示或隐藏反应组件的信息/示例/教程。更重要的是，我真正想做的是根据单击的链接加载部分内容，并且在这些部分内容中他们将使用反应组件，因此只有在那时才加载/使用该组件。这可能吗？如果是的话我该如何处理？我可以忍受第一次加载应用程序时加载 20 多个组件，但我更愿意仅在加载了显示的部分组件时才加载它们。

首先，仅渲染必要的内容。追踪起来更容易，速度也更快。

要真正“在页面之间交换”，就像在状态/属性中设置一个变量一样简单，然后使用该变量有条件地渲染您需要的任何内容。有选择地渲染你想要的任何内容的角色自然就交给了父组件。这是与导演的工作小提琴：http://jsfiddle.net/L7mua/3/ 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 {
    // I don't know, 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。条件仍然有效，迭代仍然有效，等等。