Reactの式展開について

Last updated at 2019-12-11Posted at 2019-12-11

Reactでコンポーネントを作るに当たって、変数展開は欠かせないものですが、微妙に気になることがいくつかあります。

消えるもの、消えないもの

よく条件で表示するものを変えるときに、{condition || <SomeComponent />}や{condition && <SomeComponent />}のように書くこともあるかと思いますが、条件を満たさない場合、左側がそのまま描画対象となります。

そして、trueやfalse、null、undefined、空文字列ならもちろん何も描画されないのですが、truthyなものは基本的に描画対象となりますし、falsyなものでも0は「0」として描画されてしまいます。

? :を使って条件判定の後で描画するものを明確にする、あるいは展開箇所で不等号や!、!!などを直接書いてtrueかfalseしか入らないようにする、といった注意は払ったほうがいいかもしれません。

ふつうに以下のようなHTMLを書くと、<button>とテキストの間には改行があるので、スペースが入ります。

<p>
  <button type="button">ボタン</button>
  テキスト
</p>

一方で、JSXの場合は改行の絡むスペースはすべて無視される（</button> テキストのように、同一行に書いたときは無視されません）ので、<button>とテキストがくっついてしまいます。

もちろん、「CSSで隙間を開ける」という解決策もあるのですが、スペースとしてのテキストノードを書いたほうがいい場面もあります。

このような場合、式展開の形で書けばスペースが消えることはありません。

<p>
  <button type="button">ボタン</button>
  { ' ' }
  テキスト
</p>
<p>
  <button type="button">ボタン</button>
  { ' テキスト' }
</p>

スペースだけ独立して書いてもいいですし、スペースに続く文言まで文字列として含むのもありです。