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