SwitchCase

SwitchCase は、switch-case 文と同様に、与えられた値に基づいてコンポーネントを 宣言的にレンダリングするコンポーネントです。特定の状態に応じて、異なるコンポーネントを 条件付きでレンダリングするときに便利です。

インターフェース

function SwitchCase<Case>(
  value: Case,
  caseBy: Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>,
  defaultComponent?: () => ReactElement | null
): ReactElement | null;

パラメータ

• valuerequired · Case
  

  比較する値。caseBy 内の一致するキーに対応するコンポーネントがレンダリングされます。

• caseByrequired · Partial<{ [P in StringifiedValue<Case>]: () => ReactElement | null }>
  

  値をレンダリングするコンポーネントに対応付けるオブジェクト。キーは取り得る値を表し、値は対応するコンポーネントを返す関数です。

• defaultComponent() => ReactElement | null
  

  value が caseBy のどのキーにも一致しない場合にレンダリングするコンポーネント。

戻り値

• ReactElement | null
  

  ケースに応じて条件付きでレンダリングする React コンポーネント。

使用例

function App() {
  return (
    <SwitchCase
      value={status}
      // status の値に応じて TypeA、TypeB、TypeC のいずれかをレンダリングします。
      caseBy={{
        a: () => <TypeA />,
        b: () => <TypeB />,
        c: () => <TypeC />,
      }}
      // status の値がどのケースにも一致しない場合は Default をレンダリングします。
      defaultComponent={() => <Default />}
    />
  );
}