javascript - 父级的 componentDidMount() 未被调用

Question

我有 BaseComponent，所有其他组件都继承自它。但如果子组件有 componentDidMount()，则不会调用父组件的 componentDidMount()。有没有办法始终在子组件的 componentDidMount() 之后调用父组件的 componentDidMount() ？这是example .

Answer 1

您可以使用“super()”函数来调用父级实现。

componentDidMount() {
    console.log('Child mounted.');
    super();
}

但是这被视为一种反模式。建议的方法是组合(详细信息 here )。不幸的是，如果不知道您想通过继承实现什么目标，我们就无法通过组合告诉您另一种选择。在使用您的示例时，可以这样做

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

    componentDidMount() {
        console.log('Parent mounted.'); // Not working.
    }

    render() {
        return (<div>{this.props.animalType}</div>);
    }
}

class Dog extends React.Component {
    componentDidMount() {
        console.log('Child mounted.');
    }

    render() {
        return (<Animal animalType="Dog" />);
    }
}

React.render(<Dog />, document.body);