javascript 反应：等到所有孩子都可用，然后再调用一次函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31218952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React: Wait until all childs are avaiable and call a function once afterwards
提问by Benvorth
Solved, See UPDATEbelow. You can use this code as reference to implement something simillar
已解决，请参阅下面的更新。您可以使用此代码作为参考来实现类似的东西
Lets say I have a parent react component (ES6):
假设我有一个父反应组件（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?
在完整的父级（及其所有子级）呈现后，如何使 react 调用函数？
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.
我使用@nash_ag 的输入解决了这个问题，方法是向onRender={this.onChildNodeDidMount}我的标签添加一个参数（见上文），调用 ChildDiv 中的函数，componentDidMount()现在可以决定是否所有节点都加载到我的父母componentDidUpdate()方法中。我更新了上面的代码。
采纳答案by nitishagar
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.
您可能可以使用componentDidUpdate()来检查所有子项是否已完成，因为每次渲染动态子项时都会调用它。
Once the last one is received (comparison from props), you can then go ahead with the further processing.
一旦收到最后一个（从道具中进行比较），您就可以继续进行进一步的处理。
