首页 > web前端 > js教程 > 为什么我在 React 中收到'解析错误:相邻的 JSX 元素必须包裹在封闭标签中”?

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

Barbara Streisand
发布: 2024-11-01 14:23:29
原创
361 人浏览过

Why Do I Get

解析错误:相邻的 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中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板