如何显示/隐藏ReactJS组件 [英] How to show/hide ReactJS components

问题描述

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

Trying to learn ReactJS.. but what confuses me is the rendering of the component. Every example I've seen defines a React component class and at the end has something like:

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

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

I understand that it replaces the 'comp' element with my component.. that's great. But it seems if I load 20 components, all 20 render. However, I only want to render some and not all, but use all throughout my SPA. I am using DirectorJS router, and depending on if a user logs in or not, and/or goes to certain links, I want to only show one or so of components. I can't seem to find any info/examples/tutorials on how to dynamically manage showing or hiding react components. More so, what i'd really like to do is load partials depending on links clicked and in those partials they would use react components, so only at that time load/use the component. Is this possible..if so how might I handle this? I could live with loading 20+ components one time the first time the app is loaded, but i'd prefer to only load them if the partial a component is displayed on is loaded.

推荐答案

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

First, render only what's necessary. It's easier to track and it's faster.

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

To actually "swap between pages", it's as simple as, well, setting a variable in your state/props, and use that var to conditionally render whatever you need. The role of selectively rendering whatever you want naturally goes to the parent component. Here's a working fiddle with Director: http://jsfiddle.net/L7mua/3/

关键部分，在App中：

Key part, in 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的。条件仍然有效，迭代仍然有效等等。

Notice that beyond the HTML-looking JSX syntax, you're really just using JavaScript. Conditionals still work, iterations still work, etc.

这篇关于如何显示/隐藏ReactJS组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！