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

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

Barbara Streisand

リリース： 2024-11-01 14:23:29

オリジナル

375 人が閲覧しました

Why Do I Get

解析エラー: 隣接する JSX 要素は囲みタグで囲む必要があります

問題:
試行時変数に基づいてコンポーネントを条件付きでレンダリングすると、エラーが発生します:「解析エラー: 隣接する JSX 要素は囲みタグでラップする必要があります。」

質問:
このエラーの原因それはどのように解決できますか?

答え:
React では、すべてのコンポーネントまたはコンポーネントのグループを 1 つのタグで囲む必要があります。提供されたコードでは、条件付きレンダリングにより、隣接する JSX 要素 (この場合、入力コンポーネントと ReactCSSTransitionGroup コンポーネント) が囲みタグなしで表示されます。

解決策:
解決するにはエラーが発生した場合は、これらの要素を

などの適切な囲みタグで囲んでください。

例:

<code class="jsx">render: function() {
    return (
      <div>
        {this.state.submitted == false && (
          <>
            <input type="email" onChange={this._updateInputValue} />
            <ReactCSSTransitionGroup>
              <div>
                <a href="#" onClick={this.saveAndContinue}>Request Invite</a>
              </div>
            </ReactCSSTransitionGroup>
          </>
        )}
      </div>
    );
  },</code>

ログイン後にコピー

の使用ラッパーは、追加の DOM ノードを導入せずに要素をグループ化するための軽量で意味的に中立なオプションを提供します。

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