如何显示/隐藏 ReactJS 组件

Question

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

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

我知道它用我的组件替换了 'comp' 元素.. 太好了。 但似乎如果我加载 20 个组件，所有 20 个渲染。 但是，我只想渲染一些而不是全部，而是在整个 SPA 中使用所有。 我正在使用 DirectorJS 路由器，并且根据用户是否登录和/或转到某些链接，我只想显示一个或多个组件。 我似乎找不到任何关于如何动态管理显示或隐藏 React 组件的信息/示例/教程。 更重要的是，我真正想做的是根据点击的链接加载部分，在这些部分中他们会使用反应组件，所以只有在那个时候加载/使用组件。 这可能吗..如果是这样，我该如何处理？ 我可以忍受在第一次加载应用程序时加载 20 多个组件，但我更喜欢仅在加载了显示组件的部分时加载它们。

Answer 1

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

要真正“在页面之间交换”，就像在您的状态/道具中设置一个变量一样简单，并使用该变量有条件地呈现您需要的任何内容。 有选择地渲染任何你想要的东西的角色自然地交给了父组件。 这是导演的工作小提琴： http : //jsfiddle.net/L7mua/3/

关键部分，在应用程序中：

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。 条件仍然有效，迭代仍然有效，等等。