为什么我在 React 中收到'解析错误：相邻的 JSX 元素必须包裹在封闭标签中”？

解析错误：相邻的 JSX 元素必须包裹在封闭标签中

问题：
尝试时根据变量有条件地渲染组件，会发生错误：“解析错误：相邻的 JSX 元素必须包含在封闭标记中。”

问题：
导致此错误的原因如何解决？

答案：
在 React 中，每个组件或组件组都必须包含在单个标签内。在提供的代码中，条件渲染导致相邻的 JSX 元素（在本例中为输入和 ReactCSSTransitionGroup 组件）在没有封闭标签的情况下出现。

解决方案：
解决错误，将这些元素包装在合适的封闭标签中，例如

示例：

<code class="jsx">render: function() {
    return (
      <div>
        {this.state.submitted == false && (
          <>
            <input type="email" onChange={this._updateInputValue} />
            <ReactCSSTransitionGroup>
              <div>
                <a href="#" onClick={this.saveAndContinue}>Request Invite</a>
              </div>
            </ReactCSSTransitionGroup>
          </>
        )}
      </div>
    );
  },</code>

使用 或 React.Fragment。包装器提供了一个轻量级且语义中立的选项，用于对元素进行分组，而无需引入额外的 DOM 节点。

以上是为什么我在 React 中收到'解析错误：相邻的 JSX 元素必须包裹在封闭标签中”？的详细内容。更多信息请关注PHP中文网其他相关文章！