Question

我的地图下面有什么问题？一切都包好但我仍然得到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有一个当前的限制，即只能从一个语句中返回一个顶级节点。

来自JSX in depth

React组件不能返回多个React元素，但是单个JSX表达式可以有多个子元素，所以如果你想让一个组件渲染多个东西，你可以将它包装在这样的div中

如果你的例子，你有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>

Answer 2

您对.map的调用会返回多个元素。也许你应该将它包装在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>

Answer 3

考虑你的地图正在返回什么。 jsx中的每个DOM元素本质上都是一个对象，因此你的地图试图返回javascript中不允许的几个东西。在jsx中解决这个问题的方法是用另一个dom元素包装一个dom元素集合，以便内容保留，但是你要满足javascript要求函数只返回一个东西。

jsx必须用封闭标记包装错误

3 个答案: