为什么我收到'相邻 JSX 元素必须包含在封闭标签中？”-js教程-PHP中文网

为什么我收到'相邻 JSX 元素必须包含在封闭标签中？”

Patricia Arquette

发布： 2024-11-02 18:07:29

原创

284 人浏览过

Why do I get

必须包含相邻的 JSX 元素

当尝试基于状态变量有条件地渲染组件时，必须遵守规则相邻的 JSX 元素必须包含在封闭标签内。此要求确保了 React 组件树的有效性。

当您使用 if 语句有条件地渲染元素而没有正确封闭它们时，就会出现问题。例如，在您的代码中：

if(this.state.submitted==false) {
  // ...
}

登录后复制

这会导致解析错误“相邻 JSX 元素必须包含在封闭标记中”。要解决此问题，您必须将条件元素包装在合适的父标记中，例如

if(this.state.submitted==false) {
  return (
    <div>
      {/* Conditional content here */}
    </div>
  );
}

登录后复制

或者，如果您希望在没有额外包装层的情况下显示片段，您可以利用 React 16.2 中引入的 Fragments API：

return (
  <>
    {/* Conditional content here */}
  </>
);

登录后复制

此语法允许您对 JSX 元素进行分组，而无需引入额外的 DOM 节点。

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