Reactフラグメント

React.Fragmentを使用して非表示のHTMLタグを作成する方法

戻り値をでラップする方法に注意してくださいdiv。これは、コンポーネントが返すことができる要素は1つだけであり、複数の要素が必要な場合は、別のコンテナタグでラップする必要があるためです。

ただし、これにより不要になりますdiv出力で。これを回避するには、React.Fragment：

import React, { Component, Fragment } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<React.Fragment>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</React.Fragment>
)
}
}

これも非常に良い速記構文を持っています<></>これは最近のリリース（およびBabel 7以降）でのみサポートされています：

import React, { Component, Fragment } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</>
)
}
}

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

Reactフラグメント

React.Fragmentを使用して非表示のHTMLタグを作成する方法

その他の反応チュートリアル：