javascript - 使用大括号在react中解析错误：相邻的JSX元素必须包装在一个封闭标签中。 您是否想要JSX片段<>… </> ？(parsing error with braces in react: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…</>?)

Question

I am new to react but have this snippet of code(我是新来的反应者，但是有这段代码)

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> ) If I don't use {} curly braces, I see the actual text, but if I put the curly braces around(如果我不使用{}花括号，则会看到实际的文本，但如果我将花括号放在) {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> )} I get multiple errors that I can't figure out.(我收到多个无法弄清的错误。) I am denoting the javascript with curly braces and the executable code with parenthesis, and yet there are still issues syntax issues(我用大括号表示javascript，用括号表示可执行代码，但是仍然存在语法问题) The error shows up in the div nested within a list item with this response Line 12:17: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?(该错误显示在嵌套有此响应的列表项中的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 <>...</>? The issue seems to be with this line(问题似乎与这条线有关) <div className='goal-info'>{goal.time_to_finish}</div> because when I remove it the errors go away, but I'm having a tough time figuring out why(因为当我删除它时，错误消失了，但是我很难弄清楚为什么)   ask by sf8193 translate from so

Answer 1

Within parenthesis ( .. ) you can only have single root jsx tag.(在圆括号（..）中，只能有一个根jsx标记。)

So this would work:(所以这可以工作：) ( <div> <li className='goal-list-item-shown' onClick={() => setDropdown(!dropdown)}>{goal.name}</li> <div className='goal-info'>{goal.time_to_finish}</div> </div> ) Please refer forex.(请参考外汇。) here for background: https://www.quora.com/Why-does-react-only-allow-one-DOM-element-to-be-rendered(这里是背景： https ： //www.quora.com/Why-does-react-only-allow-one-DOM-element-to-rendered)