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

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

モグモグさん

こういう時！

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

この記事でわかること

バージョン

ComponentにPropsを渡す小ワザ

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

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

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

メモ

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

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

モグモグさん

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