这个 JSX 标签的 children 属性需要一个 Element 类型的子元素，但是提供了多个子元素

作者

这个 JSX 标签的 children prop 需要一个 Element 类型的子元素，但是提供了多个子元素

This JSX tag’s ‘children’ prop expects single child of type ‘Element’, but multiple children were provided

要解决错误“此 JSX 标记的‘children’道具需要一个类型为‘Element’的子项，但提供了多个子项”，请使用片段来包装传递给组件的子道具或将组件的子道具键入为
React.ReactNode。

这个 jsx 标签 children prop 期望单身孩子

下面是错误如何发生的示例。

应用程序.tsx
type HeaderProps = {
  children: JSX.Element;
};

function Header(props: HeaderProps) {
  return <div>{props.children}</div>;
}

function App() {
  return (
    <div>
      {/* ⛔️ This JSX tag's 'children' prop expects a single child
       of type 'Element', but multiple children were provided.ts(2746) */}
      <Header>
        <h1>Hello</h1>
        <h1>World</h1>
      </Header>
    </div>
  );
}

export default App;

这里的问题是我们将Header组件的 props 键入为仅采用 type 的单个子元素JSX.Element，但我们将多个元素传递给它。

使用片段解决错误

解决错误的一种方法是使用
片段来包装组件的子项。

应用程序.tsx
type HeaderProps = {
  children: JSX.Element;
};

function Header(props: HeaderProps) {
  return <div>{props.children}</div>;
}

function App() {
  return (
    <div>
      <Header>
        {/* 👇️ wrap in Fragment */}
        <>
          <h1>Hello</h1>
          <h1>World</h1>
        </>
      </Header>
    </div>
  );
}

export default App;

我们将多个元素包装到一个片段中，因此我们只将一个子元素传递给组件Header，从而解决了错误。

如果你在使用 React TypeScript 时忘记输入childrenprop，你会得到
Property ‘children’ does not exist on type ‘X’
错误。

输入组件的childrenprop 来解决错误

更好的解决方案是将组件的子项键入为
React.ReactNode.

应用程序.tsx
type HeaderProps = {
  children: React.ReactNode;
};

function Header(props: HeaderProps) {
  return <div>{props.children}</div>;
}

function App() {
  return (
    <div>
      <Header>
        <h1>Hello</h1>
        <h1>World</h1>
      </Header>
    </div>
  );
}

export default App;

类型React.ReactNode比JSX.Element.

类型定义为：

索引.d.ts
type ReactNode = ReactChild | ReactFragment | ReactPortal | boolean | null | undefined;

现在我们可以将多个孩子传递给Header组件，而不必将它们包装在片段中。