componentDidMount() des übergeordneten Elements wird nicht

Question

aufgerufen Ich habe BaseComponent, von dem alle anderen Komponenten erben. Wenn die untergeordnete Komponente jedoch componentDidMount() hat, wird die componentDidMount() des übergeordneten Elements nicht aufgerufen. Gibt es eine Möglichkeit, componentDidMount() der Elternkomponente immer nach componentDidMount() der Kindkomponente aufzurufen? Hier ist example.

Answer 1

Sie können die "super()" -Funktion verwenden, um die Eltern-Implementierung aufzurufen.

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

Aber dies wird als anti-Muster angesehen. Der vorgeschlagene Ansatz wäre die Zusammensetzung (Details here). Leider, ohne zu wissen, was Sie durch Vererbung erreichen wollen, können wir Ihnen keine Alternative durch Komposition nennen. Bei der Verwendung von Ihrem Beispiel kann es so etwas wie diese

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

In Ihrem Beispiel geschehen, Ihre Stammkomponente Animal ist nicht eigentlich die Eltern, sondern ist eine unabhängige Komponente, da sowieso rendern Sie die Dog Komponente.

Dies ist der Grund, dass die componentDidMount von Animal Komponente ist in der Tat nicht immer genannt die Animal component selbst nicht, das aufbereitet wird, sondern nur definiert.

Damit Dog ein Kind Animal Komponente sein, machen sie von der Mutterkomponente (Animal) und ändern Sie den Code wie

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