為什麼 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中文網其他相關文章！