渲染 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中文网其他相关文章！
