Question

我知道Child组件可以调用BaseComponent setTitle方法。

但是，当Child组件安装时，BaseComponent＆＃39;生命周期方法componentDidMount将不会被执行。

＆＃13;

class BaseComponent extends React.Component{
    componentDidMount() {
       console.log('baseComponent componentDidMount')
    }
  
    setTitle(title) {
      document.title = title || 'default title'
    }
}
class Child extends BaseComponent{
    constructor() {
        super();
    }
  
    componentDidMount() {
        this.setTitle();
        console.log('child componentDidMount')
    }
  
    render() {
        return <div>react is awesome</div>
    }
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

我也知道HOC可能是更好的解决方案。如果使用es5，则mixins是最佳方式。但这不是我的问题。那么，是否可以执行BaseComponent生命周期方法。

Answer 1

你应该避免继承。就像你说的那样，HOC是要走的路...... 有关您的信息，您可以使用super：

调用父类

class Child extends BaseComponent{

    componentDidMount() {
        super.componentDidMount(); // Call the parent class
        this.setTitle();
        console.log('child componentDidMount')
    }

    render() {
        return <div>react is awesome</div>
    }
}

React，当子类继承并挂载时，父类是否运行生命周期方法？

1 个答案: