Question

我这样写了一个BaseListPage组件：

export default class BaseListPage extends Component<Props, State> {

并且，我想编写另一个继承自BaseListPage的组件，像这样：

export default class DynamicListPage extends BaseListPage<Props, State> {

但是会提示Type 'BaseListPage' is not generic.。

我是本机上的新打字机，请帮忙！

Answer 1

使用

export default class DynamicListPage extends BaseListPage {

代替

export default class DynamicListPage extends BaseListPage<Props, State> {

这足以使您的代码按预期工作。

有关此主题的更多信息，请参见：https://www.typescriptlang.org/docs/handbook/generics.html

Answer 2

这是因为您要通过BaseListPage的{{1}}部分将类型实参传递给BaseListPage<Props, State>类，但是该类不接受任何类型实参。

您可以通过将class DynamicListPage extends BaseListPage<Props, State>设置为“泛型”来接受类型参数：

BaseListPage

请参阅-https://www.typescriptlang.org/docs/handbook/generics.html

由于react组件可以具有任何形式的props或state，因此这些类型参数使您可以准确地定义给定类实例的外观，从而可以进行必要的类型检查。

例如。

class BaseListPage<Props, State> extends Component<Props, State> {

因此，要么定义interface Props { foo: string } class MyComponent extends Component<Props> { render() { console.log(this.props.foo) // Fine console.log(this.props.bar) // Error ... } }组件可以具有的确切属性和状态，从而消除对其通用性的需求：

BaseListPage

或让它通用，让DynamicListPage决定道具和状态类型：

 interface BaseListPageProps {
   foo: string
 }

 interface BaseListPageState {
   bar: string
 }

 class BaseListPage extends Component<BaseListPageProps, BaseListPageState> {
   ...
 }

 class DynamicListPage extends BaseListPage {
  render() {
     console.log(this.props.foo) // Fine
     console.log(this.state.bar) // Fine

     console.log(this.props.bar) // Error

     ...
   }
 }

更好的是，通过组合而不是继承进行组合。 https://reactjs.org/docs/composition-vs-inheritance.html

如何继承与打字稿本机反应的组件？

2 个答案: