React のプレースホルダー Fragment

2020年12月12日#react15

AI 翻訳

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

AI が生成した要約

Reactプロジェクトでは、renderメソッドは1つのルート要素を持つ必要がありますが、これにより不要なdiv要素が追加されることがあります。これを解決するために、ReactはFragmentを提供しています。Fragmentを使用することで、余分なタグを表示せずにコンポーネントをレンダリングできます。具体的には、Reactをインポートする際に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> タグが表示されます。