父母的componentDidmount()未调用

Question

i具有基本组件，所有另一个组件都继承。但是，如果儿童组件具有componentDidMount()，则不会调用父级componentDidMount()。有什么办法在componentDidMount()之后始终调用父母组件的componentDidMount()？这是示例。

Answer 1

您可以使用" super(("函数来调用父母实施。

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

但这被视为反pattern。建议的方法将是组成(此处的详细信息(。不幸的是，不知道您试图通过继承实现什么，我们无法通过构图告诉您替代方案。在使用您的示例中，可以做类似的事情

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);

Answer 2

在您的示例中，您的父组件Animal实际上不是父的，而是独立组件，因为无论如何您都在渲染Dog组件。

这是Animal组件的componentDidMount未被调用的原因，实际上Animal component本身没有被渲染，而只是定义。

为了使Dog成为Animal组件的孩子，请将其从父组件(Animal(渲染，然后更改代码，例如

class Animal extends React.Component {
    constructor(props) {
        super(props);
    }
    componentDidMount() {
        console.log('Parent mounted.'); // Not working.
    }
    render() {
    return (
         <Dog/>
    )
    }
}
class Dog extends Animal {
    componentDidMount() {
        console.log('Child mounted.');
    }
    render() {
        return <div>Dog.</div>;
    }
}
React.render(<Animal />, document.body);

jsfiddle