包装类中儿童道具的类型正确吗

Question

我试图创建一个包装类，它只返回子道具

type Props {
children: any;
}
const Wrapper: = ({ children }: Props) {
//some logic
return children;
}

想知道它是否存在比any更具体的类型？如果我尝试类似ReactNode或JSX.Element的东西，我就不能再传递多个子项。另一方面，通过使用片段，linter会抱怨，因为children也可能是单个元素。

const Wrapper: React.FC = ({ children }) =>  {
return <>{children}</>;
}

任何想法都值得赞赏！

Answer 1

React.ReactNode是React组件的children道具的正确类型。React组件必须返回一个JSX.Element。

这些不是同一类型。

children可以是一个列表，react组件必须返回一个节点。所以你只需要将children封装在一个片段中，就可以保证你总是得到一个JSX.Element。

type Props = {
children: React.ReactNode;
}
const Wrapper = ({ children }: Props) => {
//some logic
return <>{children}</>;
}
// works
const test1 = <Wrapper>123</Wrapper>
const test2 = <Wrapper>
<>foo</>
<>bar</>
</Wrapper>

游乐场

Answer 2

您可以将children道具强制转换为满足React.FC返回类型的类型

const Wrapper: React.FC = ({ children }) =>  {
return children as React.ReactElement;
}