技術と雑記ブログ

Reactで条件によってpropsの属性名と値を出し分ける方法

Reactを書いているとたまに属性の値の分岐だけではなく、特定の条件のときにのみ属性を付与したいことがあります。

そういった場合によく「あれ？どうやるんだっけ？」とたまに悩むことがあるので今回は僕の備忘録も兼ねて紹介します。

目次

さっさと結論

const App = () => {

  const hoge = 'hoge'

  return (
    <p {...(hoge && { className: hoge })}>
      テキスト
    </p>
  )
}

上記のように書くとhoge変数がある場合className=’hoge’がセットされます。

<p class="hoge">テキスト</p>

解説

簡単に解説をします。

JSXはオブジェクトをスプレッド構文で属性の展開をすることができます

以下のような記述はReactでpropsをまとめて渡して展開するときによく使うかと思います。

const App = () => {

  const props = {
    id: 'sample1',
    className: 'hoge'
  }

  return (
    <>
      <p {...props}>
        テキスト1
      </p>
      <p {...{id: 'sample2', className: 'fuga'}}>
        テキスト2
      </p>
      <p {...{className: 'piyo'}}>
        テキスト3
      </p>
    </>
  )
}
<p id="sample1" class="hoge">テキスト1</p>
<p id="sample2" class="fuga">テキスト2</p>
<p class="piyo">テキスト3</p>

スプレッド構文に論理積 (&&)を組み合わせる

先程のスプレッド構文を使用した展開方法に論理積 (&&)を組み合わせるだけで、属性名ごと出し分けることができます。

const App = () => {

  const id1:string = "sample1"
  const hoge:string = ""
  const props = {
    ...( id1 && {id: id1}),
    ...( hoge && {className: hoge})
  }

  const id2:string = ""
  const fuga:string = "fuga"

  const piyo:string = ""

  return (
    <>
      <p {...props}>
        テキスト1
      </p>
      <p {...{...( id2 && {id: id2}), className: fuga}}>
        テキスト2
      </p>
      <p {...( piyo && {className: 'piyo'})}>
        テキスト3
      </p>
    </>
  )
}
<p id="sample1">テキスト1</p>
<p class="fuga">テキスト2</p>
<p>テキスト3</p>

解説は以上です。

なぜこのようなことをするのか？

const App = () => {

  const hoge = ""

  return (
    <p className={hoge && hoge}>てきすと</p>
  )
}

こんな感じに属性の値だけを出し分けると以下のように値が無く属性名だけ残ってなんか気持ち悪いからです。

<p class>てきすと</p>

参考サイト

JSX を深く理解する

【React Tips/ 属性の有無をpropsで出し分ける】

モダンJavaScriptの基本から始める　React実践の教科書　（最新ReactHooks対応）
¥2,574 （2022/05/28 18:37時点 | Amazon調べ）
Amazon
楽天市場
Yahooショッピング