序文要素を 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デプロイメント
コードは次のようになります。 <!DOCTYPE html> <html lang...
タスク マネージャーで仮想化を確認し、有効になっている場合は仮想化を、無効になっている場合はコンピュ...
以下に、トレーニング機関からのヒントと私自身の要約をいくつか示します。以下のインデックスの内容を説明...
CSS を使用するだけで、コーナーカット + ボーダー + 投影 + コンテンツの背景色のグラデーシ...
一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...
MySQL-8.0.22-winx64のデータベースインストールチュートリアルは参考になります。具体...
<br />改行タグの使用<br>改行タグ<br>は終わりのない...
今回は、私自身の開発経験を踏まえて、以下の観点で関連内容を解説します。ページからコンポーネントにデー...
序文この記事では主に、MySQL で重複レコードをクエリして削除する方法を紹介します。参考と学習のた...
目次依存関係をインストールする構成使用1.アイコン検索ページに入る2. 使用したいアイコンの英語名を...
目次序文基礎を築くプロトタイプコンストラクタのプロパティ__プロト__プロトタイプチェーン改善する要...
1. 背景1. vSphere の共有ストレージの背景を簡単に紹介するvSphere の重要な機能は...
コードをコピーコードは次のとおりです。 <スタイル タイプ="text/css&qu...
注意すべき点は、イベントバブリング自体の特性上、メリットだけでなくデメリットも生じるということです。...
この記事では、アコーディオン効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な...