「隣接する JSX 要素は囲みタグで囲む必要があります。」というメッセージが表示されるのはなぜですか?-jsチュートリアル-php.cn

「隣接する JSX 要素は囲みタグで囲む必要があります。」というメッセージが表示されるのはなぜですか?

Patricia Arquette

リリース： 2024-11-02 18:07:29

オリジナル

284 人が閲覧しました

Why do I get

隣接する JSX 要素は囲まれている必要があります

状態変数に基づいてコンポーネントを条件付きでレンダリングしようとする場合、ルールに従うことが重要です隣接する JSX 要素は囲みタグ内でラップする必要があります。この要件により、React コンポーネントツリーの有効性が保証されます。

この問題は、if ステートメントを使用して要素を適切に囲まずに条件付きでレンダリングする場合に発生します。たとえば、コード内:

if(this.state.submitted==false) {
  // ...
}

ログイン後にコピー

これにより、「隣接する JSX 要素は囲みタグで囲まれている必要があります。」という解析エラーが発生します。これを解決するには、

if(this.state.submitted==false) {
  return (
    <div>
      {/* Conditional content here */}
    </div>
  );
}

ログイン後にコピー

などの適切な親タグ内で条件要素をラップする必要があります。または、追加のラップ層を使用せずにフラグメントを表示したい場合は、次のようにすることもできます。 React 16.2 で導入された Fragments API を活用します:

return (
  <>
    {/* Conditional content here */}
  </>
);

ログイン後にコピー

この構文により、追加の DOM ノードを導入せずに JSX 要素をグループ化できます。

以上が「隣接する JSX 要素は囲みタグで囲む必要があります。」というメッセージが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。