React ref 回调更新'this'更新子道具不起作用

Question

我遇到了这个线程中提到的问题，在使用ref回调时，ref正在更新AFTERcomponentDidMount。

显然，当您将refs传递给小时候传递给组件的元素时，可能会发生这种情况，但我认为我已经用尽了所有其他选项。我不能直接将它传递给组件(ComponentOne(，因为它是一个样式化组件，并且根据文档，我得到了对React组件实例的引用，AFAIK我无法访问该实例上的.current。我也不能将该组件包装在基本的HTML元素中，因为它在'google-map-react'中用作标记，这是不期望的。

作为一种变通方法，我尝试使用ref回调来使用this更新一些数据，目的是它重新呈现通过props传递的子组件。

这是代码：

refCb = (ref, name) => {
const { x, y } = ref.getBoundingClientRect()
this.refsData[name] = {
x,
y,
}
}
render () {
<div>
<ComponentOne>
{
this.state.list.map((listItem) => {
return (
<div ref={(itemRef) => {this.refCb(itemRef, listItem.name)}}></div>
)
}
}
</ComponentOne>
<ComponentTwo
refsData={this.refsData}
/>
</div>
}

如果我同时控制台登录refCb和ComponentTwo的渲染方法，我可以看到refCb日志排在最后。

我本以为ComponentTwo会在之后重新渲染，因为this.refsData会更新，并且它会作为道具传递。

是否误解了组件的生命周期？任何指点都会很棒，谢谢！

Answer 1

它不会重新发布，或者至少不会稳定。你需要建立某种状态，而不是

this.refsData[name] = {
x,
y,
}

否则，组件将看不到更改，也无法重新发送。

Answer 2

可能有一个更优雅的解决方案，但对于遇到同样问题的人(这是非常具体的(，我只是通过调用谷歌地图组件onZoomAnimationEnd道具中的setState(｛｝(来解决它