Qraft(クラフト) 資格・学習クイズアプリ

React入門 練習問題 50:JSXの構文ルール(要素の返却)

ReactのコンポーネントがJSXを返す際の、ルート要素(最も外側の要素)に関するルールとして正しいものはどれか。

  1. 必ず単一の親要素(またはフラグメント)で全体を囲んで返す必要がある。
  2. 複数の要素を並べた配列として返すことが常に義務付けられている。
  3. 最も外側の要素は必ずdivタグなどのブロックレベル要素でなければならない。
  4. 複数の兄弟要素をそのまま並べて返しても自動的に結合される仕組みがある。
  5. 返される要素の階層の深さは最大で5階層までに制限されている。
正解と解説を見る
正解:必ず単一の親要素(またはフラグメント)で全体を囲んで返す必要がある。

Reactのコンポーネントが返すJSXは、必ず単一の親要素(またはFragment)で全体を囲む必要があります。

【正解の理由】
Reactは内部でJSXをJavaScriptの関数呼び出しに変換するため、複数の要素をそのまま並べて返すことは構文上許可されておらず、一つの親要素でまとめる必要があります。

【不正解の理由】
• 「複数の要素を並べた配列として返すことが常に義務付けられている」という説明は誤り。配列として返すことは可能ですが、義務ではありません。
• 「最も外側の要素は必ずdivタグなどのブロックレベル要素でなければならない」という説明は誤り。divタグである必要はなく、他のタグやFragmentでも問題ありません。
• 「複数の兄弟要素をそのまま並べて返しても自動的に結合される仕組みがある」という説明は誤り。自動結合の仕組みはなく、構文エラーになります。
• 「返される要素の階層の深さは最大で5階層までに制限されている」という説明は誤り。階層の深さに制限はありません。

← 前の問題問題一覧次の問題 →
アプリで解いてレーティングを上げる(無料・登録不要)