React/jsxの三元語で真のケース内のコンポーネントと変数を表示する方法は？

Question

ビルドしたコンポーネントとボタンを変数として扱うdivの三項を使いたいのですが、シンタックスがエラーを投げています。それは私が欲しいものをするようにこれを変更する方法を知っていますか？

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

私は運と異なるJSXバリエーションの束を試してみました Module build failed: SyntaxError: Unexpected token, expected :

で<WorkListBadge />部分にerroringます。これはjsxファイル内にあります。

私はリアクションには新しく、このことについても間違った方向に進んでいる可能性があります。前もって感謝します！

Answer 1

3つのエンティティは、3つのエンティティでのみレンダリングできます。両方の要素を<div>にラップして、1つのアイテムに結合します。中括弧を追加することを忘れないでください。item.resource

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