Question

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

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

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

Answer 1

首先，只渲染必要的内容。它更容易跟踪，而且速度更快。

实际上“在页面之间交换”，就像在状态/道具中设置变量一样简单，并使用该var有条件地渲染您需要的任何内容。有选择地呈现您想要的任何内容的角色自然会转到父组件。以下是导演的工作小提琴：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。条件仍然有效，迭代仍然有效等等。

如何显示/隐藏ReactJS组件

1 个答案: