reactjs - 渲染所有子级后，对React回调进行滚动

在渲染Component的所有子孙以滚动到其中一个子孙之后，我需要执行一段代码。结构如下：

`<GrandParent>
   <IntermediateParent>
     <IntermediateParent2>
       <GrandChild/>
       <GrandChild/>
       <GrandChild/>
       <GrandChild/>
     </IntermediateParent2>
   </IntermediateParent>
 </GrandParent>`

GrandParent的render方法如下所示：

render() {
  if (!this.props.listOfGrandchildren) { // still loading data from server
    return <div>LOADING...</div>
  }

  return <IntermediateParent grandchildren={this.props.listOfGrandchildren} />
}

显然，由于ComponentDidMount显然是行不通的，因为从服务器加载数据后，子代会在以后的时间挂载。在这种情况下，GrandParent的CDM将在任何GrandChild的CDM之前触发

我可以将一个方法从顶部传递到CDM会调用的每个GrandChild。在GrandParent上，我将等待所有GrandChild通过使用计数器来调用该方法，一旦计数器等于孙子的数量，我就可以调用我的代码以滚动到所需的孙子，但这就像一个很多麻烦。

我想在数据从服务器下降之前加载GrandParent，以呈现一个占位符/加载元素。
我正在寻找一种更优雅的方法来解决这个问题。

更新：
Is componentDidMount of parent called after all componentDidMount of children?

我知道为什么GrandChild的CDM在只是看起来有不同的行为之后触发我的GrandParent ren的CDM

最佳答案

最后，最整洁的解决方案是：

我在ComponentDidMount上设置了IntermediateParent（也可以与IntermediateParent2一起使用），该调用调用设置标志loadedX = true的动作创建者。

然后，在GrandParent的ComponentWillReceiveProps中等待loadedX道具变为true。发生这种情况时，请手动调用所需的“回调”功能。我使用loadedX将GrandParent道具注入到connect中。

希望这也可以帮助其他人。如果您需要更多详细信息，请在评论中提问。我还可以为一些更真实的示例提供一些代码。