问题描述
我是新来的人,遇到了这个问题:
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>
)}
当我这样渲染时,它会给我类似multiple components must wrapt with end
When I am rendering like this it gives me error saying like multiple components must wrapt with end
我应该为每个html标签或每一行创建一个componenet,还是可以用这种方式呈现.
Should I make one componenet for each html tag or each line or I can render in that way..
有什么建议吗?
推荐答案
在React中< v16.0 render
方法只能呈现单个根节点. (更新:此版本在v16中已更改,请参见下文).在您的情况下,您将返回3个节点.为了解决这个问题,您可以将3个节点包装在一个根节点中:
In React < v16.0 the render
method 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:
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()
可能返回一个元素数组.
In React v16 it's possible for render()
to return an array of elements.
与其他数组一样,您需要向每个元素添加一个键,以避免出现键警告:
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" />,
];
}
另一种选择是使用片段.片段使您可以将子级列表分组,而无需在DOM中添加额外的节点.
Another option is to use a Fragment. Fragments let you group a list of children without adding extra nodes to the DOM.
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
还有一种用于声明片段的简短语法(<>
):
There is also a short syntax (<>
) for declaring fragments:
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
这篇关于在React.render()中返回多个元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!