Javascript react中使用大括号分析错误：相邻的JSX元素必须包装在封闭标记中。您想要JSX片段吗<></>；？

我是个新手，但我有这段代码

    return (
        <div>
            dropdown ? (<li className='goal-list-item' onClick={() => setDropdown(!dropdown)}>{goal.name}</li>) :
        (
            <li className='goal-list-item-shown' onClick={() => setDropdown(!dropdown)}>{goal.name}</li>
                <div className='goal-info'>{goal.time_to_finish}</div>
        )
        </div>
    )

返回(
下拉菜单？（
setDropdown（！dropdown）}>{goal.name}
）：
(
setDropdown（！dropdown）}>{goal.name}
{目标。完成时间}
)
)

如果我不使用{}大括号，我会看到实际的文本，但是如果我把大括号放在周围

            {dropdown ? (<li className='goal-list-item' onClick={() => setDropdown(!dropdown)}>{goal.name}</li>) :
        (
            <li className='goal-list-item-shown' onClick={() => setDropdown(!dropdown)}>{goal.name}</li>
                <div className='goal-info'>{goal.time_to_finish}</div>
        )}

{dropdown？（
setDropdown（！dropdown）}>{goal.name}
）：
(
setDropdown（！dropdown）}>{goal.name}
{目标。完成时间}
)}

我有多个错误，我无法找出。我用大括号表示javascript，用括号表示可执行代码，但仍然存在语法问题

该错误显示在嵌套在列表项中的div中，响应

第12:17行：解析错误：相邻的JSX元素必须包装在一个封闭的标记中。是否需要JSX片段…？

问题似乎在于这一行

<div className='goal-info'>{goal.time_to_finish}</div>

{goal.time\u to\u finish}

---

因为当我删除它时，错误就消失了，但我很难弄清楚为什么这是因为JSX元素必须按照错误消息的建议在React中用封闭标记包装。抛出它是因为在三元表达式中，falsy值将返回

<li></li>
<div></div>

没有像这样的封装标签

<div>
   <li></li>
   <div></div>
</div>

---

如果您的目标是在解析时消除父级

，则可以使用

来包装表达式。

这是因为JSX元素必须按照错误消息的建议在React中使用封闭标记进行包装。抛出它是因为在三元表达式中，falsy值将返回

<li></li>
<div></div>

没有像这样的封装标签

<div>
   <li></li>
   <div></div>
</div>

如果您的目标是在解析父级时消除它，那么可以使用

来包装表达式。

在括号（…）中，您只能有一个根jsx标记。因此，这将起作用：

        (
<div>
            <li className='goal-list-item-shown' onClick={() => setDropdown(!dropdown)}>{goal.name}</li>
                <div className='goal-info'>{goal.time_to_finish}</div>
</div>
        )

(
setDropdown（！dropdown）}>{goal.name}
{目标。完成时间}
)

请参考外汇。以下是背景：

在括号（..）中，您只能有一个根jsx标记。因此，这将起作用：

        (
<div>
            <li className='goal-list-item-shown' onClick={() => setDropdown(!dropdown)}>{goal.name}</li>
                <div className='goal-info'>{goal.time_to_finish}</div>
</div>
        )

(
setDropdown（！dropdown）}>{goal.name}
{目标。完成时间}
)

---

请参考外汇。此处作为背景：

为什么添加一个额外的div会解决这个问题？它与javascript有关，它本身无法返回，但只能返回单个值，并且单个div的react代码会被传输到下面的示例中：render（）{return（react.createElement（“div”，null））；}为什么要添加一个额外的div来修复它呢？它与javascript有关，它本身无法返回，但只能返回单个值，并且单个div的react代码会被传输到下面的示例中：render（）{return（react.createElement（“div”，null））；}添加到@imiro ans。。。在jsx中，常规js操作应该发生在

{}

内部。由于您使用的是？：运算符，因此应通过添加到@imiro ans中的

{}

发出声音。。。在jsx中，常规js操作应该发生在

{}

内部。因为您使用的是？：运算符，所以应该由

{}