设置作为参数传递的元素类型的正确方法是什么

Question

我正在尝试使用React.ComponentType将类型设置为作为参数传递的元素。

import * as React from "react"
type BaseType = {
element: React.ComponentType
}
const Base = ({element: Element}: BaseType) => (
<Element />
)
const renderBase = (
Component: React.ComponentType
) => <Base element={Component} />
const Hello = () => renderBase(<h1>Hello</h1>)

错误为：Argument of type 'Element' is not assignable to parameter of type 'ComponentType<{}>'.

游乐场示例

Answer 1

如果希望将JSX元素作为道具传递，可以使用类型JSX.Element，但也必须更改Base，因为<Element/>假定Element是组件，而不是元素。如果你只返回元素本身，它就会起作用：

type BaseType = {
element: JSX.Element
}
const Base = ({ element }: BaseType ) => element
const renderBase = (element: JSX.Element) =>
<Base element={element} />
const Hello = () =>
renderBase(<h1>Hello</h1>)

(我还将Element重命名为element，以强调它不是一个组件。(

TypeScript游乐场