reactjs - 如何创建泛型函数组件

Question

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

我认为像下一个示例这样的东西可以解决问题：

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


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

... 但不是

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

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

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

Answer 1

这是我最终使用的：

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) => { ... }

不是很优雅，但很有效。React 仍然不能完全识别该函数是一个组件，但与正确的 props 检查相关的智能感知似乎可以工作。

据我了解，使用打字稿创建通用功能组件如此复杂的原因似乎归结为打字稿不支持“高级类型”。