Reactjs 接受任何类型的React组件作为prop的类型是什么？

我有一个组件可以接受另一个组件作为道具

非常简单的示例：

interface Props {
  Comp: React.ComponentClass<unknown> | React.SFC<unknown>
}

const MyComp: React.FC<props> = ({ Comp }) => {
  return React.createElement(Comp)
}

界面道具{
Comp:React.ComponentClass | React.SFC
}
常量MyComp:React.FC=（{Comp}）=>{
返回React.createElement（Comp）
}

接受功能组件、基于类的组件等的Comp最简单的类型是什么

createElement的类型定义使它看起来相当复杂

React.ComponentType 是类组件（

React.ComponentClass

）或函数组件（

React.FunctionComponent

aka

React.FC

）的类型，它使用道具

p

）

interface Props {
  Comp: React.ComponentType;
}

const MyComp: React.FC<Props> = ({ Comp }) => {
  return <Comp />
}

（仅供参考，

React.ReactNode

和

React.ReactElement

是组件返回的JSX的类型，而不是可调用组件的类型）

键入Comp的道具

---

您不想在

道具

类型中使用

。您希望声明组件只需要在调用

React.createElement（Comp）

时提供的道具（您也可以使用JSX和

return

）。在本例中，您没有提供任何道具，因此它将是

React.ComponentType

或只是

React.ComponentType

，因为

{}

是

P

的默认值

interface Props {
  Comp: React.ComponentType;
}

const MyComp: React.FC<Props> = ({ Comp }) => {
  return <Comp />
}

界面道具{
Comp:React.ComponentType；
}
常量MyComp:React.FC=（{Comp}）=>{
返回
}

用一些道具：

interface Props {
  Comp: React.ComponentType<{someKey: string}>;
}

const MyComp: React.FC<Props> = ({ Comp }) => {
  return <Comp someKey="someValue" />
}

界面道具{
Comp:React.ComponentType；
}
常量MyComp:React.FC=（{Comp}）=>{
返回
}

---

如果调用

Comp

而不提供

someKey

，则会出现错误，这很好！调用

React.createElement（Comp）

时不会出现该错误，因为出于某种原因，

props

参数是可选的。因此，我认为JSX方法更好。

React.ComponentType

？

React.ReactNode

？谢谢，这很好地解决了这个问题！我不知道为什么这么难找到。我一直在使用

unknown

，因为有这样一条警告：“不要使用

{}

作为类型。

{}

实际上意味着“任何非空值”。“还有一点：ComponentType似乎不接受

keyofReactHTML

，这在我的情况下不是问题，因为我使用的是react-native，但如果有它就好了。”。