时间戳

首页 > 解决方案 > react 中的大括号解析错误：相邻的 JSX 元素必须包含在封闭标记中。你想要一个 JSX 片段 <>...？

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

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

            {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>
        )}

我收到多个我无法弄清楚的错误。我用花括号表示 javascript，用括号表示可执行代码，但仍然存在语法问题

错误显示在嵌套在具有此响应的列表项中的 div 中Line 12:17: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

问题似乎与这条线有关

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

因为当我删除它时，错误就消失了，但我很难弄清楚为什么

标签： javascriptreactjs

解决方案

在括号 ( .. ) 中，您只能有单个根 jsx 标记。所以这会起作用：

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

请参考外汇。这里是背景：https ://www.quora.com/Why-does-react-only-allow-one-DOM-element-to-be-rendered

推荐阅读