reactjs - 如何在扩展 React 组件的抽象类中使用泛型？

Question

我正在创建一个扩展 React 组件的抽象类，我希望能够设置一些默认的 Props，但也让扩展抽象类的组件提供自己的 props。

interface Props {                                                                       
  someProps: boolean                                                                    
}                                                                                       

abstract class AbstractPureForm<P, S> extends React.Component<Props & P, S> {
  ...
}

如何使用:

class Other extends AbstractPureForm<{ newProps: string}, {}> { 
  ...
}

现在这个设置给了我错误:

does not exist on type '(Props & P)["..."]'

Answer 1

引用:How to write an abstract class for a component (with extendable state & props)?

编写抽象类

而不是 Props & P (据我所知，没有办法将其指定为泛型类型参数)，您的抽象类应该为其 props 采用一个通用值，类型为 P扩展Props:

export interface Props {
    someProps: boolean;
}

export abstract class AbstractPureForm<P extends Props, S> extends React.Component<P, S>{
    // ...
}

编写具体子类

通过扩展Props接口(interface)提供 Prop

您的具体子类 Other 应该采用通过 OtherProps extends Props 显式扩展抽象类的 Props 接口(interface)的 props:

interface OtherProps extends Props {
    newProps: string;
}

class Other extends AbstractPureForm<OtherProps, {}> { 
    // ...
}

通过与Props接口(interface)相交来提供 Prop

您可以像最初一样使用交集类型，方法是创建一个类型 OtherConcreteProps & Props (具体子类和抽象类的 props 的交集):

interface OtherConcreteProps {
    newProps: string;
}

export type OtherProps = OtherConcreteProps & Props;

class Other extends AbstractPureForm<OtherProps, {}> { 
    // ...
}