Reactで条件演算子内で複数のコンポーネントを表示する方法

1. 複数のコンポーネントをラップする方法: 条件に応じて複数のコンポーネントを表示する場合、条件式を使ってコンポーネントをラップすることができます。例えば、条件がconditionという変数に基づいている場合、次のように書くことができます。

{condition ? (
  <div>
    <Component1 />
    <Component2 />
    <Component3 />
  </div>
) : (
  <div>
    <Component4 />
    <Component5 />
  </div>
)}

2. コンポーネントを配列として表示する方法: 条件に応じて表示するコンポーネントが変動する場合、コンポーネントの配列を作成し、条件に基づいて配列内のコンポーネントを表示することができます。例えば、以下のように書くことができます。

const components = condition
  ? [<Component1 key="1" />, <Component2 key="2" />, <Component3 key="3" />]
  : [<Component4 key="4" />, <Component5 key="5" />];
return <div>{components}</div>;

3. Fragmentを使用する方法: 条件に応じて複数のコンポーネントを表示する場合、ReactのFragmentを使用することもできます。Fragmentはラップ要素として表示されず、不要な余分な要素を追加しません。例えば、次のように書くことができます。

{condition ? (
  <>
    <Component1 />
    <Component2 />
    <Component3 />
  </>
) : (
  <>
    <Component4 />
    <Component5 />
  </>
)}

以上が、Reactで条件演算子内で複数のコンポーネントを表示するいくつかの方法です。必要に応じて、これらの方法を使ってコンポーネントを適切に表示することができます。