Как вызвать унаследованную функцию в реагирующем дочернем компоненте

Question

У меня есть 2 компонента. Один такой другой, как этот

export default class Parent extends React.Component { 
   myCustomFunction = () => { 
    .. 
    this.setState({
       myVar: 'pippo'
    }); 
   }
}  

export default class Child extends Parent { 
  myCustomFunction = () => { 
    //I want to call here my parent myCustomFunction 
    .. 
    this.setState({
       myVar: 'pluto',
       otherVar: 'paperino'
    }); 
   }

   render (){
     return 
        <button onClick={this.myCustomFunction } />
    }
}

Когда кто-то нажимает кнопку «Ребенок», я хочу запустить функцию «Родитель», а затем делать другие действия с состоянием.

Как мне этого добиться, не справляясь с Родителем у ребенка?

Answer 1

Существует множество подходов, но я думаю, что вы ищете, как наследовать функцию Parent, как это было бы традиционно в любой модели наследования классов.

class Parent extends React.Component {
  constructor() {
    super();
  }

  parentFunc() {
    console.log(`Parent`);
  }
}


class Child extends Parent {
  constructor() {
    super();
  }

  childFunc() {
    console.log(`Child`);
    super.parentFunc();
  }

  render() {
    return <button onClick={this.childFunc}>Click me</button>;
  }
}

CodeSandbox здесь https://codesandbox.io/s/k3n1664323

MDN документы на super () https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

ps Вы не можете вызвать super в контексте функции стрелки, вам нужно будет использовать выражение регулярной функции или использовать другой подход, потенциально такой же, как и другиепредложенный ответ.https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions