Javascript 在 React.render() 中返回多个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34893506/
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
Return multiple elements inside React.render()
提问by aryan
I am new in react and I encountered with this problem:
我是反应的新手，我遇到了这个问题：
render: function(){
return (
<h3>Account</h3>
<a href="#" onClick={some_event}>Login</a>
<a href="#" onClick={some_event}>Logout</a>
)}
When I am rendering like this it gives me error saying like multiple components must wrapt with end
当我像这样渲染时，它会给我错误提示 multiple components must wrapt with end
Should I make one componenet for each html tag or each line or I can render in that way..
我应该为每个 html 标签或每一行制作一个组件，还是我可以以这种方式呈现..
Any suggestion ?
有什么建议吗？
回答by Brett DeWoody
In React < v16.0 the rendermethod can only render a single root node. (update:this is changed in v16, see below). In your case, you're returning 3 nodes. To get around this you can wrap your 3 nodes in a single root node:
在 React < v16.0 中，该render方法只能渲染单个根节点。（更新：这在 v16 中有所改变，见下文）。在您的情况下，您将返回 3 个节点。为了解决这个问题，您可以将 3 个节点包装在一个根节点中：
render: function(){
return (
<div>
<h3>Account</h3>
<a href="#" onClick={some_event}>Login</a>
<a href="#" onClick={some_event}>Logout</a>
</div>
)}
In React v16 it's possible for render()to return an array of elements.
在 React v16 中，可以render()返回一个元素数组。
Like with other arrays, you'll need to add a key to each element to avoid the key warning:
与其他数组一样，您需要为每个元素添加一个键以避免出现键警告：
render() {
return [
<ChildA key="key1" />,
<ChildB key="key2" />,
<ChildC key="key3" />,
];
}
Another option is to use a Fragment. Fragments let you group a list of children without adding extra nodes to the DOM.
另一种选择是使用Fragment。Fragments 使您可以对子项列表进行分组，而无需向 DOM 添加额外的节点。
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
There is also a short syntax (<>) for declaring fragments:
还有一个简短的语法 ( <>) 用于声明片段：
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
回答by lulalala
Return an array of elements, separated by comma.
返回一个元素数组，以逗号分隔。
render: function(){
return ([
<h3>Account</h3>,
<a href="#" onClick={some_event}>Login</a>,
<a href="#" onClick={some_event}>Logout</a>
])
}
回答by Sisyphus
回答by Paridhi Sharma
React.render is a JavaScript function returning the DOM elements. Since in JavaScript, functions cannot return multiple expressions, so we can't return multiple elements in React. The function returns the first expression immediately after the "return" keyword, and then the function dies. That's why we are able to do this:
React.render 是一个返回 DOM 元素的 JavaScript 函数。由于在 JavaScript 中，函数不能返回多个表达式，所以我们不能在 React 中返回多个元素。函数立即返回“return”关键字之后的第一个表达式，然后函数终止。这就是为什么我们能够做到这一点：
if(1) { return 1 } return 2
if(1) { 返回 1 } 返回 2
回答by oleh.meleshko
There are few options:
有几个选项：
Just wrap it up in any
<div></div>or<section></section>.render()should return single element.You can split it up and have multiple components which implement some dedicated logic which is better and used to be a good practice in
React
只需将其包装在 any
<div></div>或<section></section>.render()应该返回单个元素。您可以将其拆分并拥有多个组件，这些组件实现了一些更好的专用逻辑，并且曾经是一个很好的实践
React
