在React与TypeScript中,props children的数据类型是什么?
大家好!我刚开始学习React与TypeScript,在给`children` prop添加类型时遇到了问题。
我有一个简单的包装组件:
```tsx
interface CardProps {
title: string;
children: ???; // 这里该写什么?
}
function Card({ title, children }: CardProps) {
return (
);
}
```
我希望这个组件能接受:
1. 纯文本(字符串)
2. 另一个React组件
3. 包裹在fragment中的多个组件
4. 任何JSX元素(div、span、img等)
5. 甚至null或undefined(如果未传递children)
在JavaScript中,我直接写`children: any`,但在TypeScript中这被视为不良实践。我尝试过使用`ReactNode`、`ReactElement`、`JSX.Element`,但对它们的区别感到困惑。
当我写`children: React.ReactNode`时,TypeScript会报错说我没有导入React。
{title}
{children}