为什么我在 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中文网其他相关文章！