Question

我有2个组成部分。一个这样的extendind

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

super（）https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super

上的MDN文档

p.s。您无法在箭头函数的上下文中调用super，您将需要使用正则函数表达式或采用其他方法，这可能与建议的其他答案类似。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

如何在React子组件中调用继承的函数

1 个答案: