gpt4 book ai didi

reactjs - 使用 TypeScript 编写 React 高阶组件

转载 作者:搜寻专家 更新时间:2023-10-30 20:34:15 24 4
gpt4 key购买 nike

我正在写一个 React higher-order component (HOC)使用 typescript 。 HOC 应该比包装组件多接受一个 prop,所以我这样写:

type HocProps {
// Contains the prop my HOC needs
thingy: number
}
type Component<P> = React.ComponentClass<P> | React.StatelessComponent<P>
interface ComponentDecorator<TChildProps> {
(component: Component<TChildProps>): Component<HocProps & TChildProps>;
}
const hoc = function<TChildProps>(): (component: Component<TChildProps>) => Component<HocProps & TChildProps) {
return (Child: Component<TChildProps>) => {
class MyHOC extends React.Component<HocProps & TChildProps, void> {
// Implementation skipped for brevity
}
return MyHOC;
}
}
export default hoc;

换句话说,hoc 是一个产生实际 HOC 的函数。这个 HOC 是(我相信)一个接受 Component 的函数。因为我事先不知道包装组件是什么,所以我使用通用类型 TChildProps 来定义包装组件的 Prop 形状。该函数还返回一个 Component。返回的组件接受包装组件的 Prop (同样,使用通用 TChildProps 键入)它自己需要的一些 Prop (键入 HocProps) .使用返回的组件时,应提供所有 Prop (HocProps 和包装的 Component 的 Prop )。

现在,当我尝试使用我的 HOC 时,我会执行以下操作:

// outside parent component
const WrappedChildComponent = hoc()(ChildComponent);

// inside parent component
render() {
return <WrappedChild
thingy={ 42 }
// Prop `foo` required by ChildComponent
foo={ 'bar' } />
}

但是我得到一个 TypeScript 错误:

TS2339: Property 'foo' does not exist on type 'IntrinsicAttributes & HocProps & {} & { children? ReactNode; }'

在我看来,TypeScript 并未将 TChildProps 替换为 ChildComponent 所需 Prop 的形状。我怎样才能让 TypeScript 做到这一点?

最佳答案

聚会有点晚了。我喜欢使用 Omit TypeScript 实用程序类型来解决这个问题。文档链接:https://www.typescriptlang.org/docs/handbook/utility-types.html#omittk

import React, {ComponentType} from 'react';

export interface AdditionalProps {
additionalProp: string;
}

export function hoc<P extends AdditionalProps>(WrappedComponent: ComponentType<P>) : ComponentType<Omit<P, 'additionalProp'>> {
const additionalProp = //...
return props => (
<WrappedComponent
additionalProp={additionalProp}
{...props as any}
/>
);
}

关于reactjs - 使用 TypeScript 编写 React 高阶组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43680786/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com