JSXで複数の要素を返す方法

コンポーネントから複数の要素を返す必要がある場合にJSXが持つ制限を回避する方法

ReactでJSXを作成する場合、注意点が1つあります。1つの親アイテムを返す必要があります。 1つだけ。

たとえば、これは不可能です。

const Pets = () => {
  return (
    <Dog />
    <Cat />
  )
}

これを解決する「古典的な」方法の1つは、コンポーネントやその他のHTML要素をdiv：

const Pets = () => {
  return (
    <div>
      <Dog />
      <Cat />
    </div>
  )
}

ただし、これには問題があります。JSXを機能させるためだけに導入されたHTML要素があり、結果のHTMLには必要ありませんが、それで終わりです。

1つの解決策は、JSX要素の配列を返すことです。

const Pets = () => {
  return [
      <Dog />,
      <Cat />
  ]
}

もう1つの解決策は、問題を解決する比較的新しいReact機能であるFragmentを使用することです。

const Pets = () => {
  return (
    <Fragment>
      <Dog />
      <Cat />
    </Fragment>
  )
}

それはのように機能しますdiv以前に追加した要素ですが、ブラウザにレンダリングされた結果のHTMLには表示されません。ウィンウィン。

私の無料ダウンロードReactハンドブック