如何在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>