如何显示/隐藏 ReactJS 组件

Question

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

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

我知道它用我的组件替换了“comp”元素。这很好。但似乎如果我加载 20 个组件，所有 20 个渲染。但是，我只想渲染一些而不是全部，而是在我的 SPA 中全部使用。我正在使用 DirectorJS 路由器，根据用户是否登录和/或访问某些链接，我只想显示一个或多个组件。我似乎找不到任何关于如何动态管理显示或隐藏反应组件的信息/示例/教程。更重要的是，我真正想做的是根据单击的链接加载部分内容，并且在这些部分中他们将使用反应组件，所以只有在那个时候加载/使用组件。这可能吗..如果是这样我该如何处理？我可以在第一次加载应用程序时加载 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 {
    // 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。条件仍然有效，迭代仍然有效，等等。