如何在与打字稿反应时为子类声明不同的状态和道具

Itsca 发表于 Dev

特斯卡

一般来说，React对打字稿和静态类型都是超新的，所以

鉴于我有这个父组件：

interface ParentProps {
 something: string
}

interface ParentState {
 somethingElse: string
}

export default class ParentComponent extends React.Component<ParentProps, ParentSate> {

  // Component Logic.

  sharedFunction() {
    // Some shared function.
  }
}

如何在子组件上声明不同的道具和状态，例如：

interface ChildProps {
 something: string
}

interface ChildState {
 somethingElse: string
}

export default class ChildComponent extends ParentComponent<ChildProps, ChildState> {
  // Child component logic.
}

当我尝试以上内容时，我得到：

[ts] Type 'ParentComponent' is not generic.

那么，实现这种分离的最佳方法是什么？谢谢。

提香·切尔尼科娃·德拉戈米尔

您也可以将其ParentComponent设为通用，以便ChildComponent可以指定不同的道具和状态：

interface ParentProps {
    something: string
}

interface ParentState {
    somethingElse: string
}

export class ParentComponent<TProps extends ParentProps = ParentProps, TState extends ParentState = ParentState>
extends React.Component<TProps, TState> {

    // Component Logic.

    sharedFunction() {
        // Some shared function.
    }
}

interface ChildProps {
    something: string
}

interface ChildState {
    somethingElse: string
}

export class ChildComponent extends ParentComponent<ChildProps, ChildState> {
    // Child component logic.
}