サイト名変更・お引越しのお知らせ

【React】特定の条件の場合にComponentにPropsを渡す小ワザを解説

特定の条件の場合にComponentにPropsを渡す小ワザを解説します。

モグモグさん

こういう時!

export const Comp = ({ cond: boolean }) => {
  // condがtrueの時にpAを渡したい
  return(
    <SomeComp
      pA={...}
    />
  );
};

この記事でわかること
  • 条件によってComponentにPropsを渡す方法がわかる

バージョン
  • react 18.1.0

ComponentにPropsを渡す小ワザ

下記のように渡すことで実現できます。

export const Comp = ({ cond: boolean }) => {
  // condがtrueの時にpAを渡したい
  return(
    <SomeComp
      {...(cond ? { pA: value } : {})}
    />
  );
};

condというbooleanがtrueであれば、pApropsが渡されて、falseの場合は何も渡さないように実装できました。

メモ

Spread演算子条件(三項)演算子を使うことでシンプルにかけますね。

まとめ

特定の条件の場合にComponentにPropsを渡す小ワザを解説しました。

モグモグさん

小ワザの小ワザでしたが、使う場面がたまにあると思いますので参考になれば幸いです。