複数の JSX タグをラップする必要があるのはなぜですか? : 別のタグまたはフラグメントへのラップ

複数の JSX タグをラップする必要があるのはなぜですか?

JSX は、JavaScript の構文拡張です。 JavaScript ファイル内に HTML フォーマットを記述することができます。

JSX を使用する場合、複数のタグを使用する場合は、これらのタグを ラッパー 内に含める必要があることがわかります。この記事では、その必要性の理由を説明します。

---

JSX は JavaScript コードで書かれ、ブラウザで理解できるように Babel などのツールによって「JavaScript に」コンパイルされます。

それでは、React.js 用の JSX の例を書いてみましょう:

このコードをコンパイルすると、次のようになります:

このコードがコンパイルされる場合、コンパイルされたコードを調べると、React.createElement 関数が 1 つの ルート要素 のみを返す必要があることが理解できます。 .

---

JSX を使用するときに複数のタグを使用する場合、それらのタグは ラッパー 内になければならない理由がわかりました。では、ラッパーには何を使用するのでしょうか?
説明しましょう。

1. HTMLタグによる折り返し

div タグまたは他のタグを使用できます。ただし、一般的には div タグが使用されます。

例:

2. フラグメントの使用法

この空のタグは フラグメント ( <>) と呼ばれます。フラグメントを使用すると、ブラウザ HTML ツリー に痕跡を残さずにグループ化できます。

例:

---

結論

JSX を使用するときに複数のタグを使用する場合、それらのタグは ラッパー 内になければならない理由がわかりました。

以上が複数の JSX タグをラップする必要があるのはなぜですか? : 別のタグまたはフラグメントへのラップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。