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+JS で水滴の波紋アニメーション ボタン効果を実装するサンプル コード

コードは次のようになります。 <!DOCTYPE html> <html lang...

DockerコンテナでPythonを実行するディープラーニング環境を構築する方法

タスク マネージャーで仮想化を確認し、有効になっている場合は仮想化を、無効になっている場合はコンピュ...

MySQLでインデックスエラーが発生する状況について簡単に説明します

以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...

CSSはコーナーカット+ボーダー+投影+コンテンツ背景色のグラデーション効果を実現します

CSS を使用するだけで、コーナーカット + ボーダー + 投影 + コンテンツの背景色のグラデーシ...

HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...

MySQL 8.0.22 winx64 のインストールと設定方法のグラフィックチュートリアル

MySQL-8.0.22-winx64のデータベースインストールチュートリアルは参考になります。具体...

例を通してBRタグとPタグの違いを理解する

<br />改行タグの使用<br>改行タグ<br>は終わりのない...

WeChatミニプログラムページとコンポーネント間の情報伝達と機能呼び出し

今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。ページからコンポーネントにデー...

MySQL で重複レコードをクエリして削除する方法の完全なガイド

序文この記事では主に、MySQL で重複レコードをクエリして削除する方法を紹介します。参考と学習のた...

Vue 開発プロジェクトで Font Awesome 5 を使用する方法

目次依存関係をインストールする構成使用1.アイコン検索ページに入る2. 使用したいアイコンの英語名を...

JavaScriptプロトタイプとプロトタイプチェーンを徹底的に理解する

目次序文基礎を築くプロトタイプコンストラクタのプロパティ__プロト__プロトタイプチェーン改善する要...

VMware vSAN 入門概要

1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...

IEのクラッシュバグ

コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...

JavaScript でイベントのバブリングを防ぐ方法

注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。...

シンプルなアコーディオン効果を実現するjs

この記事では、アコーディオン効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...