渲染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>在此修改後的程式碼中，我們將條件渲染的元素包含在封閉的
作為使用附加 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中文網其他相關文章！
