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无法完全识别该功能是Component，但是与正确的道具检查相关的智能感知似乎可以正常工作。

据我所知，用打字稿创建通用功能组件如此复杂的原因似乎可以归结为该打字稿不支持“更高种类的类型”。

如何创建通用函数组件

1 个答案: