Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
196
rated 0 times [  198] [ 2]  / answers: 1 / hits: 23363  / 9 Years ago, sat, july 4, 2015, 12:00:00

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.


More From » reactjs

 Answers
11

You can probably use the componentDidUpdate() to check if all the children are finished, as this is called every time you render a dynamic child.



Once the last one is received (comparison from props), you can then go ahead with the further processing.


[#65931] Thursday, July 2, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jackelyn

Total Points: 303
Total Questions: 103
Total Answers: 102

Location: Turks and Caicos Islands
Member since Sun, Mar 7, 2021
3 Years ago
jackelyn questions
Thu, Apr 8, 21, 00:00, 3 Years ago
Sun, Feb 28, 21, 00:00, 3 Years ago
Mon, May 25, 20, 00:00, 4 Years ago
Thu, Apr 30, 20, 00:00, 4 Years ago
;