javascript 如何显示/隐藏 ReactJS 组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22061595/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show/hide ReactJS components
提问by user3317868
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:
正在尝试学习 ReactJS .. 但让我感到困惑的是组件的渲染。我见过的每个例子都定义了一个 React 组件类，最后有类似的东西：
React.renderComponent(
<comp attr="value"" />,
document.getElementById('comp')
);
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.
我知道它用我的组件替换了 'comp' 元素.. 太好了。但似乎如果我加载 20 个组件，所有 20 个渲染。但是，我只想渲染一些而不是全部，而是在整个 SPA 中使用所有。我正在使用 DirectorJS 路由器，并且根据用户是否登录和/或转到某些链接，我只想显示一个或多个组件。我似乎找不到任何关于如何动态管理显示或隐藏 React 组件的信息/示例/教程。更重要的是，我真正想做的是根据点击的链接加载部分，在这些部分中他们会使用反应组件，所以只有在那个时候加载/使用组件。这是可能的..如果是这样，我该如何处理？第一次加载应用程序时，我可以忍受一次加载 20 多个组件，但是我
回答by chenglou
First, render only what's necessary. It's easier to track and it's faster.
首先，仅渲染必要的内容。跟踪更容易，速度也更快。
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/
要真正“在页面之间交换”，就像在您的状态/道具中设置一个变量一样简单，并使用该变量有条件地呈现您需要的任何内容。有选择地渲染任何你想要的东西的角色自然地交给了父组件。这是导演的工作小提琴：http: //jsfiddle.net/L7mua/3/
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>
);
}
Notice that beyond the HTML-looking JSX syntax, you're really just using JavaScript. Conditionals still work, iterations still work, etc.
请注意，除了看起来像 HTML 的 JSX 语法之外，您实际上只是在使用 JavaScript。条件仍然有效，迭代仍然有效，等等。
