Question

我在弄清楚如何将HOC应用于这种情况时遇到了麻烦。我想包装现有组件，因为它们都做非常相似的事情。这是我当前设置的简化版本：

function CreateComponentHere(props: BaseProps): JSX.Element {
    return <ComponentWithComponentProps />;
}
export const NewComponent = withBaseProps<BaseProps>(CreateComponentHere);

-

export function withBaseProps<T extends BaseProps>(
WrappedComponent: ComponentType<ComponentProps>
) {
    return (props: T): JSX.Element => {
        return (
        <WrappedComponent componentprop={props.valueForComponentProp}/>
        );
    }
}

有了这个，我终于有了componentprop指向正确的类型（ComponentProps），而标准props的类型是BaseProps。但是，现在打字稿抱怨： export const NewComponent = withBaseProps<BaseProps>(CreateComponentHere);，错误：

'（props：BaseProps）=>元素类型的参数不能分配给'ComponentType'类型的参数。

我想念什么？

Answer 1

因此，在与高级开发人员讨论了几个小时后，它终于可以工作了，我了解发生了什么。事实证明，道具和打字稿通常不像我认为的那样工作。我尝试包装的组件中的原始道具也只是作为道具发送出去，您需要您的类型来体现这一点。另外，我显然在这里不需要泛型。

所以最终结果像这样：

function CreateComponentHere(props: BaseProps): JSX.Element {
    return <ComponentWithComponentProps />;
}
export const NewComponent = withBaseProps(CreateComponentHere);

-

export function withBaseProps(
WrappedComponent: ComponentType<ComponentProps>
) {
    return (props: ComponentProps & BaseProps): JSX.Element => {
        return (
        <WrappedComponent componentprop={props.valueForComponentProp}/>
        );
    }
}

如何通过两种道具正确使用HOC

1 个答案: