React和Flowtype - 继承类

Question

让我们假设我有

// Foo.js
type PropsType = { cool: boolean };
class Foo extends React.Component<PropsType> {}

// Bar.js
import Foo from './Foo';

type PropsBar = { temp: string };
class Bar extends Foo {
  test() {
     this.props.cool; // there is no error
     this.props.temp;
                ^^^^ Property not found in object type  
  }
}

我的问题是，如何将额外的Props传递给Bar组件？

Answer 1

你需要让你的超级类通用。就像React.Component是通用的一样，你的类和函数也是如此。

您可以通过引入类型参数来声明诸如类或函数泛型之类的声明。

让我们让Foo通用

export default class Foo<T> extends React.Component<FooProps & T> {}

注意交叉类型，写成FooProps & T，传递给通用超级类React.Component。这意味着Foo.prototype.props将具有在FooProps中声明的属性以及T声明的任何属性。

现在当我们使用Foo时，例如在extends子句中，我们需要为T指定一个类型。

type BarProps = { temp: string };

export default class Bar extends Foo<BarProps> {
  constructor(props, context) {
    super(props, context);
    console.log(this.props.temp);
  }
}

如果您想为Foo的消费者保持简单性而不添加额外的道具，您可以为T指定默认类型，如

export default class Foo<T = {}> extends React.Component<FooProps & T> {}

export class Bar extends Foo {}

注意：上述所有语法在Flow和TypeScript中均有效。