首页 文章

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

提问于
浏览 次
1

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

javascript reactjs

3 回答

  • 1

    JSX具有当前限制，从而只能从语句返回1个顶级节点 .

    来自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>
    回复于
  • 0

    您对 .map 的调用会返回多个元素 . 也许你应该将它包装在_2527044中？

    <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>
    回复于
  • 0

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

    回复于

相关问题