Question

我知道FB不推荐继承。最理想的方法是组合。由于这个应用程序的结构是几年前由高级开发人员设置的，我没有权力将其改为初级开发

我正在尝试在子组件中调用父组件的方法。我有一个父组件ParentComp，如下所示：

export default class ParentComp extends GrandParentComp {
  constructor(props) {
    super(props);
  }

  foo() {
    console.log("Hello World")
  }

  componentDidMount() {
    this.foo();
  }
}

父组件像webpack一样捆绑在一起，所以我不能将子组件作为属性传递。

看起来像这样的子组件：

import ParentComp from './ParentComp'

export default class ChildComp extends ParentComp {
  constructor(props){
    super(props)

    this.foo = this.foo.bind(this);
  }
}

这是通过继承触发父组件方法的正确方法吗？因为“Hello World”从未在控制台上打印过。

我需要尝试的内容：我试图查找FB的文档，但他们只是跳过解释继承，说不推荐。

我需要帮助：如果我必须通过继承来实现，那么正确的方法是什么？

Answer 1

将父方法作为属性传递给子级。

export default class ParentComp extends GrandParentComp {
    constructor(props) {
      super(props);
    }

    foo() {
      console.log("Hello World")
    }

    render() {
      return (
        <ChildComp foo={this.foo()}
        );
    }
  }

在子组件中调用它。

export default class ChildComp extends ParentCOmp {
  constructor(props){
    super(props)
  }


  componentWillMount() {
    this.props.foo();
  }
}

Answer 2

class ChildComp extends ParentCOmp可能有拼写错误。除此之外，您可以使用this关键字访问子项中的父函数，就好像它是自己的函数一样。

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

  foo() {
    console.log("Hello World");
  }

  componentDidMount() {
    this.foo();
  }
}

class ChildComp extends ParentComp {
  componentDidMount() {
    this.foo();
  }
  render() {
    return "Hello Codesandbox";
  }
}

Demo Codesandbox

React：通过继承调用父方法

2 个答案: