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を追加できますが、省略構文を使用することはできません。