javascript - 如何在 React/jsx 中以三元组的形式显示真实情况下的组件和变量？

Question

我想在 div 内部执行一个三元组，以呈现我构建的组件和变量与按钮，但我的语法抛出错误。有谁知道我如何改变它，以便它达到我想要的效果？

<div>
{thing ? <WorkListBadge /> item.resource : <button> Click Me 
</button> } 
</div>

<WorkListBadge /> 上出错与 Module build failed: SyntaxError: Unexpected token, expected :

我尝试了一堆不同的 jsx 变体，但没有成功。这是在 jsx 文件中。

我是 React 新手，也可能完全以错误的方式处理这个问题。提前致谢!

Answer 1

您只能渲染三元组中的单个实体。将两个元素包裹在 <div> 中将它们组合成一个项目。请记住为 item.resource 添加大括号

 <div>
{thing ? <div><WorkListBadge /> {item.resource}</div> : <button> Click Me 
</button> } 
</div>