Question

我有两个组件如下：

/wait

但是当加载子组件时，父组件的componentWillMount方法不会自动加载。如何调用父组件的componentWillMount方法？

由于

Answer 1

      class Child extends Parent
      {
        componentWillMount () {
          super.componentWillMount() ; //parent componentWillMount
          console.log('child componentWillMount');
        }
      }

解释：

Child#componentWillMount会覆盖Parent#componentWillMount。所以：

如果您只需要Parent#componentWillMount的逻辑而不添加额外逻辑，建议您从componentWillMount删除Child。
如果您需要通过附加某些逻辑来致电Parent#componentWillMount，请保留Child#componentWillMount并在其中调用super.componentWillMount();

Answer 2

您可以按照以下方式调用父方法：

class Child extends Perent {
    componentWillMount () {
        super.componentWillMount();

        // Insert your child specific code here
     }
 }

但是Ben Nyrberg already mentioned in the comments 这不是一个好习惯。

遵循React方式重用组件代码的良好做法是组件组合：

class Parent extends React.Component {
    componentWillMount() {
        // Reusable functionality here
    }

    render() {
        return {this.props.children}
    }
}

class Child extends React.Component {
    componentWillMount() {
        // Child specific functionality
    }

    render() {
        return <div>Whatever you want</div>
    }
}


class App extends React.Component {
    render() {
        return <Parent>
           <Child />
        </Parent>
    }
}

Reactjs调用父组件的componentWillMount

2 个答案: