浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【react】三項演算子でJSXを返す場合は、必ず親要素を含めないといけない

JSXの中で三項演算子を使ってその判定でJSXを振り分けたい場合は、最低限一つ親が定義されていないといけない。

これは、三項演算子が返せるJSXが一つしかないためである。

例えば、以下のように親を持たないpタグを三項演算子の判定で出そうとすると以下のエラーがでる。

JSX expressions must have one parent element.

</pre>
{ this.state.name != null ?
<p>親を持たないむき出しの要素</p>
<div id="user-page">
<p>親に包まれた子要素</p>
</div> : null }
<pre>

 

この状態では二行目のpタグがぽつんと立っているためビルドをするとエラーが起きる。

このように一つの判定で複数の要素を出すのは不可能なので、必ずdivなどの親要素を含めて出すこと。

</pre>
{ this.state.name != null ?
<div id="user-page">
<p>この中に含めることで表示が可能になる</p>
<p>親に包まれた子要素</p>
</div> : null }
<pre>

 

JSXを設計する時もふんわりした考えで作っていくと後で要素を加えたい時に事故りがちなので、最初から

存在するべき要素と状況に応じて表示が変わる要素を切り分けていく必要がある。

  • この記事いいね! (0)