Reagire: attendere fino a quando tutti i child sono disponibili e chiamare una funzione una volta dopo

Question

risolto, vedere UPDATE di seguito. È possibile utilizzare questo codice come riferimento per implementare qualcosa simillar

---

Diciamo che ho un genitore reagire componente (ES6):

Parent

import ChildDiv from './ChildDiv' 

export default React.createClass({ 
    displayName: 'ParentDiv', 

    getInitialState() { 
    nodesLoadedToCanvas: 0, 
    workedOnParentOnceAfterAllChildrenWereLoaded: false 
    }, 

    onChildNodeDidMount() { 
    let nodeCount = this.state.nodesLoadedToCanvas + 1 
    this.state.nodesLoadedToCanvas = nodeCount 
    console.log('Mount ' + this.state.nodesLoadedToCanvas + ' nodes so far') 
    }, 

    render() { 
    const {children} = this.props // 'children' is a model collection 

    return (
     <div id='ParentDiv'> 
     {children.map((childDiv) => 
     <ChildDiv data={childDiv} key={childDiv.id} onRender={this.onChildNodeDidMount}/> 
    )} 
     </div> 
    ) 
    }, 

    componentDidMount() { 
    console.log('Parent did mount') 
    }, 

    componentDidUpdate() { 
    let allNodesArePresent = (this.state.nodesLoadedToCanvas === this.props.children.length) 
    if (!this.state.workedOnParentOnceAfterAllChildrenWereLoaded) { 
     console.log('Do something') 
     this.state.workedOnParentOnceAfterAllChildrenWereLoaded= true 
    } 
    } 
}) 

e un bambino componenti come questo

Bambino

export default React.createClass({ 
    displayName: 'ParentDiv', 

    render() { 
    const {data} = this.props 

    return (
     <div id='ParentDiv'> 
     data.name 
     </div> 
    ) 
    }, 

    componentDidMount() { 
    console.log('ChildDiv did mount') 
    this.props.onRender() // tell parent that child did mount 
    }, 

    componentDidUpdate() { 
    } 
}) 

Perché la mia console dicendo

Parent did Mount 
ChildDiv did Mount 
ChildDiv did Mount 
ChildDiv did Mount 

E non

ChildDiv did Mount 
ChildDiv did Mount 
ChildDiv did Mount 
Parent did Mount 

?

Come posso far richiamare una funzione dopo il rendering del genitore completo (e di tutti i suoi childs)?

UPDATE

Ho risolto questo con l'ingresso di @nash_ag con l'aggiunta di un parametro onRender={this.onChildNodeDidMount} alla mia etichetta (vedi sopra), chiamare la funzione in ChildDiv in componentDidMount() e può ora decidere se tutti i nodi sono stati caricati a i miei genitori componentDidUpdate() metodo. Ho aggiornato il mio codice sopra.

Answer 1

Probabilmente si può usare componentDidUpdate() per verificare se tutti i bambini sono finiti, poiché questo viene chiamato ogni volta che si esegue il rendering di un bambino dinamico.

Una volta ricevuto l'ultimo (confronto dagli oggetti di scena), è possibile procedere con l'ulteriore elaborazione.