Javascript Reactjs调用组件将装入父组件

我有以下两个部分：

class Parent
{
  componentWillMount () {
    console.log('parent componentWillMount');
  }
}

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

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

---

谢谢

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

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

        // Insert your child specific code here
     }
 }

但是作为这不是一个好的做法

遵循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>
    }
}

类父级扩展React.Component{
组件willmount（）{
//这里的可重用功能
}
render（）{
return{this.props.children}
}
}
子类扩展了React.Component{
组件willmount（）{
//子特定功能
}
render（）{
你要什么就给什么
}
}
类应用程序扩展了React.Component{
render（）{
返回
}
}

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

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

        // Insert your child specific code here
     }
 }

但是作为这不是一个好的做法

遵循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>
    }
}

类父级扩展React.Component{
组件willmount（）{
//这里的可重用功能
}
render（）{
返回{this.props.children}
}
}
子类扩展了React.Component{
组件willmount（）{
//子特定功能
}
render（）{
你要什么就给什么
}
}
类应用程序扩展了React.Component{
render（）{
返回
}
}

说明：

Child#componentWillMount

覆盖

Parent#componentWillMount

。因此：

• 如果您只需要

  Parent#componentWillMount

  的逻辑，而不需要添加额外的逻辑，建议从

  Child

  中删除

  componentWillMount

• 如果需要通过附加一些逻辑调用

  Parent#componentWillMount

  ，请保留

  Child#componentWillMount

  并在其内部调用

  super.componentWillMount（）
  

说明：

Child#componentWillMount

覆盖

Parent#componentWillMount

。因此：

• 如果您只需要

  Parent#componentWillMount

  的逻辑，而不需要添加额外的逻辑，建议从

  Child

  中删除

  componentWillMount

• 如果需要通过附加一些逻辑调用

  Parent#componentWillMount

  ，请保留

  Child#componentWillMount

  并在其内部调用

  super.componentWillMount（）
  

---

为什么需要访问父级组件Willmount？基于react的渲染树，如果子组件将被渲染，则不必“重新渲染”父组件。againI建议不要对react组件执行此类继承。理论上，您可以调用super.componentWillMount（），但这不是一个好的做法。为什么需要访问父级组件Willmount？基于react的渲染树，如果子组件将被渲染，则不必“重新渲染”父组件。againI建议不要对react组件执行此类继承。理论上，您可以调用super.componentWillMount（），但这不是一个好的做法。我猜是有一个输入错误：

super（）

调用了

Parent

的构造函数，不是同一个方法。是的，这是一个输入错误。谢谢现在已经修好了！：）我猜是有一个输入错误：

super（）

调用了

Parent

的构造函数，不是同一个方法。是的，这是一个输入错误。谢谢现在已经修好了！：）