迹忆客 专注技术分享

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

下面是一个产生上述错误的示例

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>
  )
}

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

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

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 希望我们将 children prop 传递给组件。

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

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 标签。

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

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