為什麼我在 React 中收到「解析錯誤：相鄰 JSX 元素必須包裹在封閉標籤中」錯誤？

解析錯誤：相鄰的JSX 元素必須包含在封閉標籤中

渲染React 元件時，必須遵守相鄰的JSX 元素必須包含在內的規則在父標籤中。當元素並排存在而沒有被公共父元素包裝時，就會發生此錯誤。

錯誤原因

提供的程式碼包含一個 if 語句，該語句根據條件有條件地渲染兩個 div 元素this.state.subscribed 變數的值。但是，這些元素是相鄰的，並且未包含在任何父標記中。

解決方案

要解決此錯誤，請將條件渲染的元素包裝在封閉標記中。這將確保 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中文網其他相關文章！