javascript - jsx 必须用封闭标签错误换行

Question

我下面的 map 有什么问题吗？一切都已正确包装，但我仍然收到错误 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>

Answer 1

JSX 有一个当前限制，即语句只能返回 1 个顶级节点。

来自JSX in depth

A React component can't return multiple React elements, but a single JSX expression can have multiple children, so if you want a component to render multiple things you can wrap it in a div like this

如果您的示例中，您有 3 个节点作为彼此的兄弟节点:h2、p 和 div。

您可以通过将它们全部包装在 1 个顶级容器中来解决此问题:

<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>