React のプレースホルダー Fragment

2020年12月12日#react15

AI 翻訳

この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示

AI が生成した要約

Reactプロジェクトでは、renderメソッドは1つのルート要素しか持てず、通常はdivを使用しますが、これにより不要な親要素が増えてしまいます。これを解決するために、ReactはFragmentを提供しています。Fragmentを使用することで、余分なタグを表示せずにコンポーネントをレンダリングできます。使用例として、Fragmentをインポートし、renderメソッド内でルート要素としてFragmentを使用する方法が示されています。

React プロジェクトでは、render メソッドは 1 つのルート要素しか持てず、一般的には <div> </div> を使用し、その中にコンポーネントを書きます。ブラウザでレンダリングすると、表示したいコンポーネントの他に、外側にもう 1 つの div が追加されます。プロジェクトを作成する際に多くのコンポーネントをネストすると、各レイヤーに親要素の div が追加され、見栄えが悪く、スタイルを調整する際に少し面倒になります。

そのため、React はプレースホルダー Fragment を提供しています。書き方は次の通りです：

// index.js

import React, { Component, Fragment } from 'react'

export default class index extends Component {
    render() {
        return (
            <Fragment>
                <h2>こんにちは、世界</h2>
            </Fragment>
        )
    }
}

React をインポートする際に、Fragment 属性を追加し、render() メソッド内の唯一のルート要素を <Fragment> </Fragment> で置き換えます。この時、ブラウザを再度見ると、余分なタグが表示されず、直接 <h2> タグが表示されます。