React.js で隣接する JSX 要素を囲むタグが必要なのはなぜですか?

隣接する JSX 要素には囲みタグが必要

React.js コンポーネントを作成するときは、隣接する JSX 要素が囲みタグ内でラップされていることを確認することが重要です。

提供されたコード スニペットのエラー:

Uncaught Error: Parse Error: Line 38: Adjacent JSX elements must be wrapped in an enclosing tag

は、if ステートメントの条件付きレンダリングにより、囲んでいるコンテナーなしで div 要素がレンダリングされていることを示します。この問題を解決するには、これらの要素を div:

<code class="jsx">if (this.state.submitted === false) {
  return (
    <div>
      <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>

などの適切なタグ内でラップする必要があります。あるいは、Fragments API を使用して、DOM に不要な要素を追加せずに囲むコンテキストを作成することもできます。 :

<code class="jsx">if (this.state.submitted === false) {
  return (
    <React.Fragment>
      <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>
    </React.Fragment>
  );
}</code>

以上がReact.js で隣接する JSX 要素を囲むタグが必要なのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。