序文要素を DOM ツリーにバッチで追加する場合は、最初に document.createDocumentFragment を作成して、要素を 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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ハイパーリンクを使用してリンクファイルを開く HTML 方式の紹介
>>: フロントエンドアプリケーションのjenkins+gitlab+nginxデプロイメント
ページめくりの問題のシナリオBとCは同じページ(表と裏)にありますページをめくって A をカバーした...
基本的な紹介前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう ...
説明するこの記事では、Vue テクノロジーに基づいて再帰コンポーネントを実装する方法を紹介します。 ...
HTML のヘッド部分には、ブラウザによる Web ページのレンダリングや SEO などに関連するタ...
サブクエリの分類返された結果セットによる分類サブクエリは、返される結果セットの違いに応じて、テーブル...
目次1: galera-clusterの紹介2. galera-clusterの仕組み3: Mari...
目次1. HTMLタグ要素にCSSスタイルを直接埋め込む2. HTMLのheadセクションにおけるス...
この記事では、MySQL の sql_mode モードについて例を挙げて説明します。ご参考までに、詳...
目次1. 部分文字列() 2. サブストラクチャ() 3.インデックス() 4.最後のインデックス(...
この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...
概要インデックス作成は、MySQL で習得しなければならないスキルであり、MySQL クエリの効率を...
基礎1. スキャフォールディングを使用してプロジェクトを作成し、開始する1.1 足場を設置する: n...
問題を見つける今日は、vue ファイルにローカル画像を導入する際に問題が発生したので、この記事を書き...
要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS....
<br />1998年に最初の個人ページが誕生してから2008年の今日まで、デザイン業界...