React 中预期相应的 JSX 结束标记错误

Expected corresponding JSX closing tag error in React

当我们忘记关闭 JSX 代码中的标签时，会出现 React.js 错误“Expected corresponding JSX closing tag”。

要解决该错误，请使用自动关闭标签，例如<input />并确保您的 JSX 代码中打开和关闭标签的顺序是正确的。

预期相应的 jsx 结束标记

以下是错误发生方式的示例：

应用程序.js


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

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

使用自闭标签

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

应用程序.js


export default function App() {
  return (
    <div>
      <h1>Hello world</h1>
      <input id="icon_prefix" type="text" class="validate" />
    </div>
  );
}

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

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

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

我们总是必须关闭标签或使用自关闭标签，否则 React 希望我们将 prop 传递children给组件。

打开和关闭标签的顺序不正确

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

应用程序.js


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

问题是h1标签打开，然后span元素开始，然后
h1标签在元素之前关闭span。

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

应用程序.js


export default function App() {
  return (
    <div>
      <h1>
        Hello world
        <span>Hello 123</span>
      </h1>
    </div>
  );
}

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