反应：等到所有孩子都可用，然后再调用一次函数

Question

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

---

假设我有一个父反应组件（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
    }
  }
})

还有一个像这样的子组件

儿童

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

为什么我的控制台说

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

不是

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

?

如何在渲染完整的父级（及其所有子级）后让 react 调用一个函数？

更新

我使用@nash_ag 的输入解决了这个问题，方法是在我的标签中添加一个onRender={this.onChildNodeDidMount} 参数（见上文），在componentDidMount() 中调用ChildDiv 中的函数，现在可以决定是否所有节点都加载到我的父母@987654327 @ 方法。我更新了上面的代码。

Answer 1

您可能可以使用componentDidUpdate() 来检查所有孩子是否都已完成，因为每次渲染动态孩子时都会调用它。

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