React で「解析エラー: 隣接する JSX 要素は囲みタグでラップする必要があります」というエラーが発生するのはなぜですか?

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

React コンポーネントをレンダリングするときは、隣接する JSX 要素を囲む必要があるというルールに従うことが重要です親タグ内。このエラーは、要素が共通の親によってラップされずに並んで存在する場合に発生します。

エラーの原因

提供されたコードには、次の条件に基づいて 2 つの div 要素を条件付きでレンダリングする if ステートメントが含まれています。 this.state.submitted 変数の値。ただし、これらの要素は隣接しており、親タグで囲まれていません。

解決策

このエラーを解決するには、条件付きでレンダリングされた要素を囲むタグ内でラップします。これにより、JSX 構造が有効であることが確認されます。たとえば、コードを次のように変更できます。

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        
          <input type="email" classname="input_field" onchange="{this._updateInputValue}" ref="email" value="{this.state.email}">

          <reactcsstransitiongroup transitionname="example" transitionappear="{true}">
            <div classname="button-row">
              <a href="#" classname="button" onclick="{this.saveAndContinue}">Request Invite</a>
            </div>
          </reactcsstransitiongroup>
        >
      )}
    </div>
  )
},</code>

この変更されたコードでは、条件付きでレンダリングされる要素を囲む

内に囲みます。タグ。これにより、隣接する JSX 要素に有効な親が設定され、エラーが解決されます。

Fragments API (オプション)

追加の div タグを使用する代わりに、Fragments API を使用できます。 。これにより、DOM に追加のノードを追加せずに要素をグループ化できます。次のコードは、フラグメントの使用方法を示しています。

<code class="javascript">render: function() {
  var text = this.state.submitted ? 'Thank you!  Expect a follow up at '+email+' soon!' : 'Enter your email to request early access:';
  var style = this.state.submitted ? {"backgroundColor": "rgba(26, 188, 156, 0.4)"} : {};
  return (
    <div>
      {this.state.submitted == false && (
        
          <input type="email" classname="input_field" onchange="{this._updateInputValue}" ref="email" value="{this.state.email}">

          <reactcsstransitiongroup transitionname="example" transitionappear="{true}">
            <div classname="button-row">
              <a href="#" classname="button" onclick="{this.saveAndContinue}">Request Invite</a>
            </div>
          </reactcsstransitiongroup>
        >
      )}
    </div>
  )
},</code>

このコードでは、 を使用しています。コンポーネントを使用して、条件付きでレンダリングされる要素をラップします。これにより、

を使用した場合と同じ結果が得られます。タグは追加されますが、DOM に追加のノードは追加されません。

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