Reactjs 如何创建通用函数组件

是否可以创建通用功能组件

我假设像下一个例子这样的东西会起作用：

type MyComponentProps<T> = T & {
    component: ComponentType<T>, 
    primary?: boolean, 
    size?: 'S' | 'M' | 'L'
}


const MyComponent: ComponentType<MyComponentProps<T>> = ({ component, size, primary,...rest }) => {
    /* ... */
}

type MyComponentProps=T&{
组件：组件类型，
主？：布尔，
尺寸？：'S'|'M'|'L'
}
const MyComponent:ComponentType=（{component，size，primary，…rest}）=>{
/* ... */
}

。。。但不是

将组件声明为函数并省略React.ComponentType声明时，声明似乎很好：

function MyComponent<T>({ size, primary, component, ...rest }: MyComponentProps<T>) {
    /* ... */
}

function MyComponent（{size，primary，component，…rest}:MyComponentProps）{
/* ... */
}

---

但是这样编写组件时，TSX（我正在使用最新的create react应用程序）不再将其识别为组件，因为它缺少我假设的react.ComponentType声明。

这就是我最后使用的：

type MyComponentProps<T> = T & {
    component: ComponentType<T>, 
    primary?: boolean, 
    size?: 'S' | 'M' | 'L'
}
type MyGenericComponent = <T>(p: MyComponentProps<T>) => ReactElement | null;

const MyComponent: MyGenericComponent = (props) => { ... }

type MyComponentProps=T&{
组件：组件类型，
主？：布尔，
尺寸？：'S'|'M'|'L'
}
键入MyGenericComponent=（p:MyComponentProps）=>ReactElement | null；
常量MyComponent:MyGenericComponent=（props）=>{…}

不是很优雅但是很管用。Still React未完全识别功能是一个组件，但与正确的道具检查相关的intellisense似乎可以工作

据我所知，用typescript创建通用函数组件如此复杂的原因似乎可以归结为typescript不支持“更高级类型”