Reactフラグメントを使用して複数の子を返す

React 16の導入により、コンポーネント、要素、文字列の配列を使用して、コンポーネントのrenderメソッドで複数の子要素を返すことができるようになりました。たとえば、これはReact16の時点で有効な構文になりました。

class App extends Component {
  render() {
    return [
      <Card key="1" />,
      'Just a text node',
      <Card key="2" title="Hello" content="I'm just a card in the world" />
    ];
  }
}

複数の要素を返すことができることの利点は、要素をラップしてDOMを乱雑にする余分なdiv要素を含める必要がないことです。

そして、これはステートレス機能コンポーネント（SFC）でうまく機能します。

const App = () => {
  return [
    <Card key="1" />,
    'Just a text node',
    <Card key="2" title="Hello" content="I'm just a card in the world" />
  ];
};

問題は、配列を使用する構文が少し厄介であり、要素に一意のキーを追加する必要があることです。 React 16.2で導入された解決策は、 ReactFragmentsを利用することです。

Reactフラグメントを入力してください

Fragment コンポーネントを使用すると、配列構文やキーを使用せずに同じことを実行できるようになりました。 React.Fragment コンポーネントを使用して、返された要素をラップするだけです。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Card />
        Just a text node
        <Card title="Hello" content="I'm just a card in the world" />
      </React.Fragment>
    );
  }
}

Fragment コンポーネントを直接インポートすることで、構文をより簡潔にすることができます。

import React, { Component, Fragment } from 'react';

class App extends Component {
  render() {
    return (
      <Fragment>
        <Card />
        Just a text node
        <Card title="Hello" content="I'm just a card in the world" />
      </Fragment>
    );
  }
}

<>> 省略構文

新しい<></>の省略構文を使用すると、最も簡潔にすることができます。

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <>
        <Card />
        Just a text node
        <Card title="Hello" content="I'm just a card in the world" />
      </>
    );
  }
}

この記事の執筆時点ではまだベータ版であるBabel7は、この短縮構文を<React.Fragment>に相当するものに適切にトランスパイルするために必要です。

Create React App の現在の安定バージョンは、内部でBabel 6.xを使用しているため、省略構文はそのままでは機能しません。今すぐその構文の使用を開始するには、 react-scripts の最新の不安定なリリースを使用できます。これにより、Babel7ベータリリースが使用されます。

$ yarn add react-scripts@next

<React.Fragment>構文を使用する場合はフラグメントコンポーネントに小道具を追加できますが、省略構文を使用する場合は追加できないことにも注意してください。たとえば、配列を反復処理するときに最上位のフラグメントが返される場合、 key propを追加できますが、省略構文を使用することはできません。