在反應中用大括號解析錯誤：必須將相鄰的 JSX 元素包裝在封閉標記中。 你想要一個 JSX 片段 <>...？

Question

我是新手，但有這段代碼

    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 <>...</>? 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>

因為當我刪除它時錯誤消失了，但我很難弄清楚為什么

Answer 1

在括號 (..) 內，您只能有單個根 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

Answer 2

這是因為 JSX 元素必須按照錯誤消息的建議在 React 中用封閉標記包裝。 拋出它是因為在您的三元表達式中將返回虛假值

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

不包含這樣的標簽

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

如果你的目標是在解析時消除父<div> ，你可以使用<React.Fragment>來包裝表達式。