Solved, See UPDATE below. You can use this code as reference to implement something simillar
Lets say I have a parent react component (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
}
}
})
And a child-component like this
Child
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 () {
}
})
Why is my console saying
Parent did Mount
ChildDiv did Mount
ChildDiv did Mount
ChildDiv did Mount
And not
ChildDiv did Mount
ChildDiv did Mount
ChildDiv did Mount
Parent did Mount
?
How can I make react call a function after the full parent (and all it's childs) are rendered?
UPDATE
I solved this with the Input of @nash_ag by adding a onRender={this.onChildNodeDidMount}
Parameter to my tag (see above), call the function in ChildDiv in componentDidMount()
and can now decide if all nodes were loaded in my parents componentDidUpdate()
method. I updated my code above.