我下面的地图怎么了?一切都正确包装,但我仍然出现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>

10-06 04:20
查看更多