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中均有效。

React和Flowtype - 继承类

1 个答案: