使用打字稿自动包装 react-redux 连接组件

时间:2021-01-12 15:10:12

标签: reactjs typescript redux react-redux

我正在 Typescript 中使用 React 和 Redux。

我想创建一个自定义的 connect 方法,该方法调用 Redux 库中的原始方法并将创建的 ConnectedComponent 包装在另一个容器组件中。

这是我目前所拥有的简化版本:

const myConnect = <TState, TStateProps, TDispatchProps, TOwnProps>(
    mapStateToProps: MapStateToPropsParam<TStateProps, TOwnProps, TState>,
    mapDispatchToProps: MapDispatchToPropsParam<TDispatchProps, TOwnProps>) =>
    <TComp extends ComponentType<Matching<TStateProps & ResolveThunks<TDispatchProps>, GetProps<TComp>>>>(component: TComp) => {

        const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(component);

        const WrappedComponent = (props: TOwnProps) => {
            return (<div>
                <ConnectedComponent {...props} />
            </div>);
        }
        return WrappedComponent;
    }

对于尝试插入 ConnectedComponent 的行,我收到以下编译错误:

Type 'TOwnProps' is not assignable to type 'IntrinsicAttributes & LibraryManagedAttributes<ConnectedComponent<TComp, Pick<GetProps<TComp>, Exclude<keyof GetProps<TComp>, Extract<keyof TStateProps, keyof GetProps<...>> | Extract<...>>> & TOwnProps>, LibraryManagedAttributes<...>>'.
  Type 'TOwnProps' is not assignable to type 'LibraryManagedAttributes<ConnectedComponent<TComp, Pick<GetProps<TComp>, Exclude<keyof GetProps<TComp>, Extract<keyof TStateProps, keyof GetProps<TComp>> | Extract<...>>> & TOwnProps>, LibraryManagedAttributes<...>>'.ts(2322)

我是网络开发的初学者,所以希望这只是一些新手错误。

任何帮助将不胜感激!

0 个答案:

没有答案