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

解析エラー: 隣接する 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 サイトの他の関連記事を参照してください。

for Error using Conditional dom this input

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。