时间戳

首页 > 解决方案 > 来自 react-redux 的连接的高阶组件不适用于 Typescript Typings

javascript - 来自 react-redux 的连接的高阶组件不适用于 Typescript Typings

问题描述

我创建了必须通过连接函数连接到 redux 存储的高阶组件。实际上一切都在纯 Javascript 中工作，但我想在这里使用 Typescript。有一个与道具输入有关的错误。

我正在为 Wrapped Props 组件使用通用类型，而且我的高阶组件有他自己的 Props 类型。所以我想通过&运算符连接它们，但是我从连接函数中得到错误..

WithSatsFormProps是空接口

const withSatsForm =
    <P, K>(options: WithSatsFormOptions<K>) =>
        (SatsComponent: ComponentType<P>) => {
            class WithSatsForm extends Component<WithSatsFormProps & P> { <-- because of this
                constructor(props: WithSatsFormProps & P) {
                    super(props);
                }

                public render() {
                    return (
                        <div>
                            <SatsComponent {...this.props as P} />
                        </div>
                    )
                }
            }

            return connect()(WithSatsForm); <-- here is error typing
        }

export default withSatsForm;

错误信息：

“typeof WithSatsForm”类型的参数不能分配给“ComponentType, WithSatsFormProps & P>>”类型的参数。类型 'typeof WithSatsForm' 不可分配给类型 'ComponentClass, WithSatsFormProps & P>, any>'。参数 'props' 和 'props' 的类型不兼容。

标签： javascriptreactjstypescripthigh-order-component

解决方案

请在 TypeScript 中观看这个React 和 Redux - 静态类型指南

推荐阅读