如何显示/隐藏ReactJS组件

小编典典

如何显示/隐藏ReactJS组件

reactjs

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

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

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

阅读 310

2020-07-22

共1个答案

小编典典

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

要实际上“在页面之间交换”，就像在状态/属性中设置变量并使用该var有条件地呈现所需内容一样简单。选择性地呈现所需内容的作用自然归父组件。这是与Director一起工作的小提琴：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 {
    // 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。条件条件仍然有效，迭代仍然有效，等等。

2020-07-22