Question

所以我的基本要求是我希望能够访问我的HOC中的redux存储，并能够从我的HOC中调度操作。

我想出了一个样板模板，说明我希望事情如何进行，不幸的是，我不确定如何使它工作。

type InjectedProps = { injectedProp: string };
type ClassProps = { someClassProp: string };
type reduxProps = { reduxProp: string }
type mapStateToProps = (args: reduxProps) => reduxProps;
type BaseClassProps = ClassProps & InjectedProps;

class BaseClass extends React.Component<BaseClassProps> {
    render() {
        return <></>
    }
};

const SomeHoc = <P extends InjectedProps>(BaseComponent: React.ComponentType<P>) => {
    class InjectorHoc extends React.Component<Omit<P, keyof InjectedProps>> {

        render() {
            return (
                <BaseComponent {...this.props as P} injectedProp='' />
            );
        }
    };
    return InjectorHoc;
};

向上到目前为止，一切都像魅力一样。现在，当我尝试将Hoc连接到商店时，问题开始出现。

这是我要克服的第一个错误。对于我的用例，如果我的班级将所有道具都传递给HOC，就可以了。

const SomeHoc = <P extends InjectedProps>(BaseComponent: React.ComponentType<P>) => {
    class InjectorHoc extends React.Component<Omit<P, keyof InjectedProps> & reduxProps> {

        render() {
            // Conversion of type 'Readonly<Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps> & Readonly<{ children?: ReactNode; }>' 
            // to type 'P' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, 
            // convert the expression to 'unknown' first.
            return (
                <BaseComponent {...this.props as P & InjectedProps} injectedProp='' />
            );
        }
    };
    return InjectorHoc;
};

当我尝试将类连接到redux存储时，显示第二个错误。

const SomeHoc = <P extends InjectedProps>(BaseComponent: React.ComponentType<P>) => {
    class InjectorHoc extends React.Component<Omit<P, keyof InjectedProps> & reduxProps> {

        render() {
            return (
                <BaseComponent {...this.props as P} injectedProp='' />
            );
        }
    };
    //  Argument of type 'typeof InjectorHoc' is not assignable to parameter of type 'ComponentType<Matching<reduxProps & {}, Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps>>'.
    //  Type 'typeof InjectorHoc' is not assignable to type 'ComponentClass<Matching<reduxProps & {}, Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps>, any>'.
    //  Types of parameters 'props' and 'props' are incompatible.
    //  Type 'Matching<reduxProps & {}, Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps>' is not assignable to type 'Readonly<Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps>'.
    //  Type 'P extends "reduxProp" ? (reduxProps & {})[P] extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] ? (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] : (reduxProps & {})[P] : (Pick<...> & reduxProps)[P]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] | ((reduxProps & {})[P] extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] ? (Pick<P, Exclude<...>> & reduxProps)[P] : (reduxProps & {})[P])' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type '(reduxProps & {})[P] extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] ? (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P] : (reduxProps & {})[P]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type '(reduxProps & {})[P] | (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type '(reduxProps & {})[P]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'string' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'reduxProps & {}' is not assignable to type 'Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps'.
    //  Type 'reduxProps & {}' is not assignable to type 'Pick<P, Exclude<keyof P, "injectedProp">>'.
    //  Type '(string extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"] ? (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"] : string) | (Exclude<...> extends "reduxProp" ? (reduxProps & {})["reduxProp" & Exclude<...>] extends (Pick<...> & reduxProps)["reduxProp" & Exclude<...>] ? (P...' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'string extends (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"] ? (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"] : string' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'string | (Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)["reduxProp"]' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    //  Type 'string' is not assignable to type '(Pick<P, Exclude<keyof P, "injectedProp">> & reduxProps)[P]'.
    return connect((args) => args as mapStateToProps, {})(InjectorHoc);
};

在同一方面的任何帮助将不胜感激。我不想使用渲染道具模式来实现它，我愿意接受任何其他替代方法来完成手头的任务。谢谢。

无法对联网的高阶组件进行强类型输入

0 个答案: