React Fragment の紹介と詳しい使い方

序文

要素を DOM ツリーにバッチで追加する場合は、最初に document.createDocumentFragment を作成して、要素を DOM ツリーにバッチで追加することをお勧めします。
DocumentFragment を作成し、DocumentFragment を DOM ツリーに追加します。これにより、DOM 操作の数が減り、新しい要素が作成されなくなります。

DocumentFragment と同様に、React にも Fragment という概念があり、同様の用途があります。 React 16 より前では、Fragment は拡張パッケージ react-addons-create-fragment を通じて作成されていましたが、React 16 では、'Fragment' は <React.Fragment></React.Fragment> を通じて直接作成されます。

フラグメントの動機

一般的なパターンは、コンポーネントが子要素のリストを返すことです。次の React コードスニペットを例に挙げます。

クラスTableはReact.Componentを拡張します{
  与える（） {
    戻る （
      <テーブル>
        <tr>
          <コラム />
        </tr>
      </テーブル>
    );
  }
}

レンダリングされた HTML を有効にするには、<Columns /> が複数の要素を返す必要があります。親 div が <Columns /> の render() で使用されている場合、生成された HTML は無効になります。

クラスColumnsはReact.Componentを拡張します{
  与える（） {
    戻る （
      <div>
        <td>こんにちは</td>
        <td>世界</td>
      </div>
    );
  }
}

< Table /> 出力を取得します。

<テーブル>
  <tr>
    <div>
      <td>こんにちは</td>
      <td>世界</td>
    </div>
  </tr>
</テーブル>

この問題を解決するためにフラグメントが生まれました。

React Fragment の紹介と使用

React.Fragment コンポーネントを使用すると、追加の DOM 要素を作成せずに、render() メソッドから複数の要素を返すことができます。一般的なパターンは、コンポーネントが複数の要素を返すことです。フラグメントを使用すると、DOM に余分なノードを追加せずにサブリストをグループ化できます。

理解するために、コンポーネントを定義するときに、return でラップされた最も外側の div はページにレンダリングされたくないことが多いため、Fragment コンポーネントを使用する必要があります。 Vue の <template ></ template > と同じです。

与える（） {
  戻る （
    <React.フラグメント>
      いくつかのテキスト。
      <h2>見出し</h2>
    </React.フラグメント>
  );
}

短縮構文 <></> を使用することもできます。

与える（） {
  戻る （
    <>
      いくつかのテキスト。
      <h2>見出し</h2>
    </>
  );
}

さらに、React 16 からは render が配列を返すことをサポートしており、この機能は多くの人が知っています。この機能により、不要なノードのネストが削減されます。

'react' から React をインポートします。

エクスポートデフォルト関数（）{
    戻る [
        <div>1</div>,
        <div>2</div>,
        <div>3</div>
    ];
}

<React.Fragment> と <> の違い

<></> 構文はキーや属性を受け入れることができませんが、 <React.Fragment> は受け入れることができます。

明示的な <React.Fragment> 構文を使用して宣言されたフラグメントにはキーが含まれる場合があります。 1 つの使用例は、コレクションをフラグメントの配列にマッピングすることです。たとえば、説明のリストを作成します。

関数 Glossary(props) {
  戻る （
    <ダウンロード>
      {props.items.map(item => (
        // `key` がない場合、React はキー警告を発します <React.Fragment key={item.id}>
          <dt>{item.term}</dt>
          <dd>{アイテムの説明}</dd>
        </React.フラグメント>
      ))}
    </dl>
  );
}

key はフラグメントに渡すことができる唯一の属性です。将来的には、イベントなどの他のプロパティのサポートが追加される可能性があります。

注意: 省略形 <></> は現在、一部のフロントエンドツールでは適切にサポートされておらず、create-react-app で作成されたプロジェクトはコンパイルされない可能性があります。したがって、このような状況に遭遇するのは普通のことです。

React Fragmentの紹介と詳しい使い方については以上です。React Fragmentに関するより詳しい内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: