Javascript 反应：等待所有子对象都可用，然后调用函数一次

已解决，请参阅下面的更新。您可以使用此代码作为参考来实现类似的功能

---

假设我有一个父反应组件（ES6）：

家长

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
    }
  }
})

而不是

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

?

在呈现完整父级（及其所有子级）后，如何使react调用函数

更新

---

我用@nash_ag的输入解决了这个问题，在我的标记中添加了一个

onRender={this.onChildNodeDidMount}

参数（见上文），在

componentDidMount（）

中调用ChildDiv中的函数，现在可以确定是否所有节点都加载到我的父

componentdiddupdate（）

方法中。我更新了上面的代码。

您可能可以使用

componentdiddupdate（）

检查是否所有子对象都已完成，因为每次渲染动态子对象时都会调用此函数

---

一旦收到最后一个（来自道具的比较），您就可以继续进行进一步的处理。

您能详细说明一下您想要做什么吗？日志的顺序是有意义的，因为子文档不能在其父文档之前。但是，当调用componentDidMount时，所有的组件都已经呈现出来了。因此，它们必须出现在DOM上。如果我将连接操作置于

componentdiddupdate（）

中，我的连接将被绘制（在一些失败的尝试之后），但每次组件更新时都会被重新绘制。这会破坏我的性能，而且不好…它在componentDidMountNope中应该可以正常工作。JSPlumb打印到我的控制台“无法建立连接-源不存在”Mmh。我不知道jsPlumb是怎么工作的了。您是如何告诉jsplumb使用哪些元素的？谢谢您的输入。您对如何最好地确定是否所有儿童都进行了渲染有什么想法吗？

React。儿童

可能会有所帮助。检查：这对我来说非常有效，因为我需要一种方法来知道何时更新了儿童道具。谢谢仅供参考，注意不要通过在componentDidUpdate（）中设置状态而导致无限循环，每次设置状态时都没有中断。我知道是因为我自己做的。

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

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