ReactJS: Fire-Methode, wenn Komponente wird

Question

gemacht

ich eine allgemeine Frage zu ReactJS bekam:

Ist es möglich, ein Verfahren, sobald alle JSX-Komponenten (<div> components </div>) gemacht werden erfolgreich abzufeuern? Wenn also einige nur unter bestimmten Bedingungen gerendert werden, kann ich eine Methode auslösen, sobald sie alle true sind.

Wie würde ich überprüfen, ob alles erfolgreich gerendert wurde?

Answer 1

Es gibt eine Lifecycle-Methode componentDidMount, die sofort aufgerufen wird, nachdem reagiert die Komponente rendert, wird es einmal aufgerufen, nur nach dem ersten Rendern, ich denke, dass Sie diese Methode verwenden können.

Wie pro DOC:

componentDidMount() aufgerufen wird, unmittelbar nachdem ein Bauteil montiert. Initialisierung, die DOM-Knoten erfordert, sollte hier gehen. Wenn Sie Daten von einem Remote-Endpunkt laden müssen, ist dies ein guter Ort, um die Netzwerkanforderung instanziieren . Wenn in dieser Methode der Status gesetzt wird, wird ein erneutes Rendering ausgelöst.

über zweite ques:

Sie machen die Elemente auf der Grundlage einiger Bedingungen, ich angenommen bin, dass Sie irgendeine Art von bool verwenden oder die Länge des Arrays überprüft, so gibt es eine Lifecycle-Methode componentWillUpdate, es wird vor dem Re-Rendern der Komponente aufgerufen werden (es wird nicht beim ersten Rendern aufgerufen) innerhalb dieser Methode können Sie prüfen, für alle Bedingungen und rufen Sie eine Methode, wenn alle Bedingungen wahr sind. Also wann immer Sie tun setState wird es aufgerufen und Sie können die Logik hier setzen.

Answer 2

Dies ist nur ein Skelett, aber es sollten Sie die Lösung erhalten helfen, die Sie suchen:

type ChildProps = { 
    onUpdated:() => void; 
} 

class MyChildComponent extends React.component<ChildProps, void> { 
    componentDidUpdate() { 
     this.props.onUpdated(); 
    } 

    render() { 
     ... 
    } 
} 

class MyComponent extends React.Component<void, void> { 
    private childCount: number; 
    private updated: number; 

    constructor() { 
     this.childCount = 2; 
    } 

    render() { 
     this.updated = 0; 

     return (
      <div> 
       <MyChildComponent onUpdated={ this.childUpdated.bind(this) } /> 
       <MyChildComponent onUpdated={ this.childUpdated.bind(this) } /> 
      </div> 
     ); 
    } 

    private childUpdated() { 
     this.updated++; 
     if (this.updated === this.childCount) { 
      // do something... 
     } 
    } 
}