如何在覆盖父函数的函数中访问子类中的 this.props

Question

I want to use this.props.childName in child function that is defined in the parent function. But it's TypeScript compile error ( Property 'name' does not exist... ) If I use this.props.parentName , it's ok. How can I access this.props of child class?

interface Prop<T> {
  parentName: string
}

class Parent<T> extends React.Component<Prop<T>, State<T>> {
  constructor(props: Prop<T>) {
    super(props)
  }
  printName() {}
}

interface PropChildren<T> {
  childName: string
}

class Child<T> extends Parent<string> {
  constructor(props: PropChildren<T>) {
    super(props)
  }

  printName() {
    console.log(this.props.childName) // here I want to use children prop but compile error
  }
}

Answer 1

Your child component extends the parent component, and the type of props in the parent is Prop<T> , which contains only the property parentName .

In order to have PropChildren as the type of props in the child component you should declare it as:

class Child<T> extends React.Component< PropChildren<T>, State<T>> {
    // ...
}

By the way, you don't need to make your props interfaces generic (with <T> ). The generics are used only when the interface can be used in different contexts with different data types.

Based on your comment, here is an example of how you can share the behavior of the parent with the child, but still being able to define a different data type for the child's props:

interface PropParent {
    parentName: string
}

class Parent<TProp extends PropParent> extends React.Component<TProp, State> {
    constructor(props: TProp) {
        super(props)
    }
    printName() {}
}

interface PropChildren extends PropParent {
    childName: string
}

class Child<T> extends Parent<PropChildren> {
    constructor(props: PropChildren) {
        super(props)
    }

    printName() {
        console.log(this.props.childName)
    }
}

Answer 2

first, you don't need any Generics in interface unless you need to use it in different places. second, class Child should also extend from React.Component not from its parent. so here is what might be a better code

import React from 'react'
interface IParentProps {
  readonly parentName: string;
  readonly children?: JSX.Element 
}
interface IPropsChild {
  readonly childName: string;
}
class Parent extends React.Component<IParentProps> {
  constructor(props: IParentProps) {
    super(props)
  }
  printName = () => {

  }
  render() {
    return <Child childName={this.props.parentName} />
  }

}
class Child extends React.Component<IPropsChild> {
  constructor(props:IPropsChild) {
    super(props)
  }
  printName = () => {
    console.log(this.props.childName)
  }
}

Answer 3

In order to allow both, proper props definition and the child class derive from the parent class you have to include the props type in your definition:

interface ParentProp<T> {
    parentName: string;
}

export class Parent<T, P = ParentProp<T>, S = {}, SS = any> extends React.Component<P, S, SS> {

    public printName() {
        // console.log(this.props.parentName); Doesn't compile, as P can be any prop interface.
    }
}

interface ChildProp<T> {
    childName: string;
}

export class Child<T> extends Parent<T, ChildProp<T>> {

    public printName() {
        console.log(this.props.childName);
    }
}