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

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をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • react-redux @connect における connect デコレータの使用法の詳細な説明
  • ReactNative FlatList の使い方と落とし穴パッケージの概要
  • React Nativeはシンプルなログイン機能を実装します(推奨)
  • React Native オープンソースのタイム デート ピッカー コンポーネント (react-native-datetime) の詳細な説明
  • react-router browserHistory 更新ページの 404 問題の解決方法
  • react-router4.0を使用してリダイレクトと404機能を実装する方法
  • Reactルーティングの各バージョンのリダイレクト方法の詳細な説明
  • React ビルドのパッケージ化後とリリースの概要

<<:  ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介

>>:  フロントエンドアプリケーションのjenkins+gitlab+nginxデプロイメント

推薦する

CSS変換ページめくりアニメーションレコードの実装

ページめくりの問題のシナリオBとCは同じページ(表と裏)にありますページをめくって A をカバーした...

10分でCSS3グリッドレイアウトを理解する

基本的な紹介前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう ...

Vueテクノロジーに基づく再帰コンポーネントの実装方法

説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...

HTML ヘッドタグの詳細な紹介

HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...

MySQLサブクエリの詳細な例

サブクエリの分類返された結果セットによる分類サブクエリは、返される結果セットの違いに応じて、テーブル...

MySQLのクラスタモードでのgalera-clusterのデプロイメントの詳細説明

目次1: galera-clusterの紹介2. galera-clusterの仕組み3: Mari...

HTML に CSS を導入するいくつかの方法の紹介

目次1. HTMLタグ要素にCSSスタイルを直接埋め込む2. HTMLのheadセクションにおけるス...

MySQL の sql_mode モード例の詳細な説明

この記事では、MySQL の sql_mode モードについて例を挙げて説明します。ご参考までに、詳...

文字列から指定された文字を削除または抽出する JavaScript メソッド (非常によく使用されます)

目次1. 部分文字列() 2. サブストラクチャ() 3.インデックス() 4.最後のインデックス(...

Ubuntu 18.04 システムでの Redis および phpredis 拡張機能のインストールと設定の詳細な説明

この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...

MySQL 実験: explain を使用してインデックスの傾向を分析する

概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...

React+Ant Design開発環境をセットアップするための実装手順

基礎1. スキャフォールディングを使用してプロジェクトを作成し、開始する1.1 足場を設置する: n...

Vue で動的に読み込まれたローカル画像を処理する方法

問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...

Vueプラグインの詳しい説明

要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....

ウェブデザインの概要

<br />1998年に最初の個人ページが誕生してから2008年の今日まで、デザイン業界...