Reactで条件によってpropsの属性名と値を出し分ける方法
Reactを書いているとたまに属性の値の分岐だけではなく、特定の条件のときにのみ属性を付与したいことがあります。
そういった場合によく「あれ？どうやるんだっけ？」とたまに悩むことがあるので今回は僕の備忘録も兼ねて紹介します。
さっさと結論
TypeScript
tsx
const App = () => {
const hoge = 'hoge'
return (
<p {...(hoge && { className: hoge })}>
テキスト
</p>
)
}上記のように書くとhoge変数がある場合className=’hoge’がセットされます。
HTML
結果
<p class="hoge">テキスト</p>解説
簡単に解説をします。
JSXはオブジェクトをスプレッド構文で属性の展開をすることができます
以下のような記述はReactでpropsをまとめて渡して展開するときによく使うかと思います。
TypeScript
tsx
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>
</>
)
}
HTML
結果
<p id="sample1" class="hoge">テキスト1</p>
<p id="sample2" class="fuga">テキスト2</p>
<p class="piyo">テキスト3</p>スプレッド構文に論理積 (&&)を組み合わせる
先程のスプレッド構文を使用した展開方法に論理積 (&&)を組み合わせるだけで、属性名ごと出し分けることができます。
TypeScript
tsx
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>
</>
)
}
HTML
結果
<p id="sample1">テキスト1</p>
<p class="fuga">テキスト2</p>
<p>テキスト3</p>解説は以上です。
なぜこのようなことをするのか？
TypeScript
tsx
const App = () => {
const hoge = ""
return (
<p className={hoge && hoge}>てきすと</p>
)
}こんな感じに属性の値だけを出し分けると以下のように値が無く属性名だけ残ってなんか気持ち悪いからです。
HTML
結果
<p class>てきすと</p>参考サイト
【React Tips/ 属性の有無をpropsで出し分ける】
¥2,574 （2022/05/28 18:37時点 | Amazon調べ）
ポチップ