Reactjs nennen componentWillMount der Elternkomponente

Question

Ich habe zwei Komponenten wie folgt:

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

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

Aber wenn das Kind Komponente der componentWillMount Methode der übergeordneten Komponente geladen wird, wird nicht automatisch geladen. Wie rufen Sie die ComponentWillMount-Methode der übergeordneten Komponente auf?

Dank

Answer 1

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

erklären:

Child#componentWillMount überschreibt Parent#componentWillMount. Also:

• wenn Sie brauchen nur Logik der Parent#componentWillMount, ohne zusätzliche Logik wird empfohlen componentWillMount von Child zu entfernen.

• Wenn Sie Parent#componentWillMount anrufen mit etwas Logik anhängt, behalten Child#componentWillMount und rufen im Inneren super.componentWillMount();

Answer 2

Sie können ein Elternteil die Methode in der Folge Weise nennen:

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

     // Insert your child specific code here 
    } 
} 

Aber wie Ben Nyrberg already mentioned in the commentses ist keine gute Praxis.

Die gute Praxis von Komponenten Wiederverwendung von Code durch die Art und Weise folgende Reaktion mit Komponenten Zusammensetzung:

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