我是react的新手，我遇到了这个问题：
render: function(){
return (
<h3>Account</h3>
<a href="#" onClick={some_event}>Login</a>
<a href="#" onClick={some_event}>Logout</a>
)}
当我像这样渲染时，它会给我错误提示 multiple components must wrapt with end
我应该为每个 html 标签或每一行制作一个组件，还是我可以以这种方式呈现..
有什么建议吗？
在 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>
)}
在 React v16 中，可以render()返回一个元素数组。
与其他数组一样，您需要为每个元素添加一个键以避免出现键警告：
render() {
return [
<ChildA key="key1" />,
<ChildB key="key2" />,
<ChildC key="key3" />,
];
}
另一种选择是使用Fragment。Fragments 允许您对子项列表进行分组，而无需向 DOM 添加额外的节点。
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
还有一个简短的语法 ( <>) 用于声明片段：
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
返回一个元素数组，以逗号分隔。
render: function(){
return ([
<h3>Account</h3>,
<a href="#" onClick={some_event}>Login</a>,
<a href="#" onClick={some_event}>Logout</a>
])
}
您可以对React 16.2+ 中的片段使用以下语法：
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
React.render 是一个返回 DOM 元素的 JavaScript 函数。由于在 JavaScript 中，函数不能返回多个表达式，所以我们不能在 React 中返回多个元素。函数立即返回“return”关键字之后的第一个表达式，然后函数终止。这就是为什么我们能够做到这一点：
if(1) { 返回 1 } 返回 2
有几个选项：
只需将其包裹在 any<div></div>或<section></section>. render()应该返回单个元素。
您可以将其拆分并拥有多个组件，这些组件实现了一些更好的专用逻辑，并且曾经是一个很好的实践 React