React入門 練習問題 16:JSXの記法:Fragmentの役割
Reactの<React.Fragment>(または短縮記法<>...</>)の役割として正しいものはどれか。
- 複数の要素を、余分なDOM要素を追加せずにまとめて1つの親要素として返すために使う
- 複数のstateをまとめて1つのオブジェクトとして管理するために使う
- 複数のイベントハンドラを1つの関数にまとめて登録するために使う
- 複数のCSSクラスを1つのclassName文字列にまとめて結合するために使う
- 複数のuseEffectを1つのライフサイクルフックにまとめて実行するために使う
Qraftユーザーの成績:難易度 Bランク(レーティング1286)・正答率 40%(6/15回正解)
レーティングは解いた人の実力と正誤から算出する難しさ(初期値1200)。ランクはその全問題中の順位(S+が最難関、F-が最易)
正解と解説を見る
正解:複数の要素を、余分なDOM要素を追加せずにまとめて1つの親要素として返すために使う
JSXではコンポーネントが返す要素は1つのルート要素にまとめる必要がありますが、Fragmentを使うことで余分なdivなどのDOM要素を追加せずに複数の要素をまとめて返すことができます。
【正解の理由】
Fragmentは実際のDOMにはレンダリングされないため、不要なネストを避けつつ複数要素をひとつの戻り値として返せます。
【不正解の理由】
• 「複数のstateをまとめて1つのオブジェクトとして管理する」という説明は誤り。stateの統合とFragmentは無関係である
• 「複数のイベントハンドラを1つの関数にまとめて登録する」という説明は誤り。Fragmentはイベント処理には関与しない
• 「複数のCSSクラスを1つのclassName文字列にまとめて結合する」という説明は誤り。クラス名の結合は文字列操作で行うものであり、Fragmentの役割ではない
• 「複数のuseEffectを1つのライフサイクルフックにまとめて実行する」という説明は誤り。Fragmentはレンダリングの構造に関する機能であり、useEffectの統合とは無関係である