問題一覧に戻る
初級JSX基礎
問題7: フラグメント

React Fragmentを使用すると、余分なノードをDOMに追加することなく複数の要素をグループ化できます。複数の要素を返す必要がある場合は'<''<''>'>（短縮構文）または'<'React.Fragment'>'を使用します。

function Navigation() {
  // 余分なラッパーdivを避けるためFragmentを使用
  return (
    {/* 複数の要素をグループ化 */}
    <>
      <h1>Welcome</h1>
      <nav>
        <a href="/">Home</a>
        <a href="/about">About</a>
      </nav>
    </>
  );
}

export default Navigation;
···