我下面的地图怎么了?一切都正确包装,但我仍然出现jsx must wrap with an enclosing tag
错误
<div className="col-md-12">
{items.map(obj => {
<h2 className="title">{obj.name}</h2>
<p className="edited">Last updated on {obj.updated_at}</p>
<div className="actions_wrap">
<Link to="/item/edit/"{obj._id}>Edit</Link>
<a>Delete</a>
</div>
})}
</div>
如果我用
div
包装内容,则此行有错误:<Link to="/item/edit/"{obj._id}>Edit</Link>
最佳答案
JSX有一个当前限制,即一条语句只能返回1个顶级节点。
来自JSX in depth
一个React组件不能返回多个React元素,但是一个JSX表达式可以有多个子元素,因此,如果您希望一个组件呈现多个内容,可以将其包装在div中,如下所示
如果以您的示例为例,您有3个节点作为彼此的同级节点:h2,p和div。
您可以通过将它们全部包装在一个顶级容器中来解决此问题:
<div className="col-md-12">
{items.map(obj => {
<div>
<h2 className="title">{obj.name}</h2>
<p className="edited">Last updated on {obj.updated_at}</p>
<div className="actions_wrap">
<Link to=`/item/edit/${obj._id}`>Edit</Link>
<a>Delete</a>
</div>
</div>
})}
</div>