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ハンドブック


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