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" />
    ];
  }
}

そして、これはステートレス機能コンポーネント（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 [email protected]