如何解决 React 中 Expected corresponding JSX closing tag error 错误

  • Z时代
  • 2024-01-10
  • 分类：综合

当我们忘记关闭 JSX 代码中的标签时，会出现 React.js 错误 “Expected corresponding JSX closing tag”。 要解决错误，需要使用自闭合标签，例如 <input /> 并确保 JSX 代码中打开和关闭标签的顺序正确。

以下是产生该错误的示例：

exportdefaultfunctionApp() {
// ⛔️ Expected corresponding JSX closing tag for <input>.
return (
<div>
<h1>Hello world</h1>
<inputid="icon_prefix"type="text"class="validate">
</div>
  )
}

示例中的问题是我们忘记关闭输入元素的标签。

我们可以使用自闭合标签来解决错误。

exportdefaultfunctionApp() {
return (
<div>
<h1>Hello world</h1>
<inputid="icon_prefix"type="text"class="validate" />
</div>
  );
}

我们为输入元素使用了一个自闭合标签。 因此，我们没有使用导致错误的 <input>，而是使用了 <input />。

该错误通常也由 img 元素引起。 确保始终将您的 img 标签关闭为 <img src="..." /> 。

<br /> 和 <hr /> 标签也是如此。

我们总是必须关闭标签或使用自关闭标签，因为如果不这样的话 React 期望我们将 children 属性传递给组件。

当我们打开和关闭标签的顺序不正确时也会导致错误。

exportdefaultfunctionApp() {
// ⛔️ Expected corresponding JSX closing tag for <input>.
return (
<div>
<h1>Hello world
<span>Hello 123</h1></span>
</div>
  );
}

上面代码片段中的问题是 h1 标签打开，然后 span 元素开始，然后 h1 标签在 span 元素之前关闭。

为了解决这种情况下的错误，我们必须先关闭 span 标签。

exportdefaultfunctionApp() {
return (
<div>
<h1>
        Hello world
<span>Hello 123</span>
</h1>
</div>
  );
}

总是使用关闭标签或自关闭标签，因为如果 React 只找到一个开始标签，那么它期望我们将一个 children 属性传递给元素然后关闭它。

本文转载自：迹忆客（https://www.jiyik.com）

以上是 如何解决 React 中 Expected corresponding JSX closing tag error 错误 的全部内容， 来源链接： utcz.com/z/290324.html

回到顶部