Question

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

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

GrandParent的渲染方法如下所示：

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的CDM之后触发，只是想要有不同的行为

Answer 1

最后，最巧妙的解决方案如下：

我在ComponentDidMount上设置了IntermediateParent（也适用于IntermediateParent2），它会调用设置标记loadedX = true的动作创建者。

然后，在GrandParent＆＃39; ComponentWillReceiveProps等待loadedX道具变为真。发生这种情况时，请手动拨打所需的“回叫”电话。功能。我使用loadedX将GrandParent道具注入connect。

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

Answer 2

我们知道，当父render()时，孩子会render()。这意味着我们需要挂钩父render()并查看孩子是否存在。我们不想挂钩孩子render()因为这会运行太多次并且超出了孩子的范围。

查看React Component Lifecycle，我们发现有两种方法可以在父render()，componentDidMount()和componentDidUpdate()之后挂钩。我们知道我们无法使用componentDidMount()，因为父级会在孩子之前安装。但是，我们可以使用componentDidUpdate()。在componentDidUpdate()，您可以使用ref，document.querySelector()，document.getElementById()等来获取对孩子的引用。一旦你能够得到子引用，设置一个布尔标志，这样你只需在componentDidUpdate()内运行一次回调。

我觉得这是一个更清洁的解决方案。我认为接受的答案有点迂回。您可以使用IntermediateParent修改ComponentDidMount()，使用已调度的redux操作或父级中的回调函数修改操作，然后使用componentWillReceiveProps()。 componentWillReceiveProps()还需要一个像我的解决方案一样的布尔标志。

实际上，也许它不在孩子的范围之外。另一种解决方案是让父母将回调传递给孩子，以便在孩子的componentDidMount()期间进行呼叫。每次子进程安装时都会调用此回调，但您可以在父进程中保留一个布尔标志，以便代码只运行一次。

在渲染所有子项后，执行回滚以回滚

2 个答案: