React - 如何获取组件子元素的大小并重新定位它们

我有一个组件，它在动态网格中排列元素，如下所示：

class GridComponent extends React.Component {
  render() {
    return <div>
      {items.map(function(item){
          return <ItemComponent someData={item}/>;
      })}
    </div>
  }
}

现在我想定位ItemComponents基于某种算法，这需要个人ItemComponents方面。

所以我想，我需要：

1. 渲染全部ItemComponents
2. 获取所有尺寸ItemComponents（仅在渲染后才修复）
3. 重新定位ItemComponents根据我的算法

所以我的问题是如何做到这一点，或更具体：

• 当所有代码都执行时，我如何执行一些代码ItemComponents已渲染？
• 我如何获得尺寸ItemComponents从 GridComponent 内部？
• 我应该重新渲染GridComponent与计算出的ItemComponents位置或者我应该设置的位置ItemComponents直接以某种方式？

这是一个非常酷的想法，你完全可以使用内部状态和一些 React 生命周期方法来做到这一点。回答您的每个问题：

• 功能componentDidMount将在所有构造函数之后在父级上调用componentDidMount每个孩子的，因此这里是调用一些可能依赖于您的状态的函数的好地方
• 通过尺寸我假设你的意思是根组件的屏幕宽度和高度ItemComponent因此开启componentDidMount in ItemComponent，你可以设置一个ref并找到 DOM 元素的宽度和高度
• 最好的解决方案是安装但不渲染子项（可以使用一些初始化状态变量或道具来完成），并且仅在计算出它们的真实最终位置后才渲染它们。例如，每个ItemComponent可以有一个名为initialized在父母找到放置它的位置之前，这是错误的。

将所有这些放在一起，由于您的算法可能需要所有维度才能工作，因此您可能希望在父级中创建一个回调，让我们称之为setItemDimensions(id, width, height)，被调用componentDidMount每个ItemComponent。您应该保留所有初始化的地图ItemComponents 并且每次setItemDimensions被调用时，检查是否还有剩余（可能用所有空值初始化映射，并在没有剩余空值时假设它已“准备好”）。

一旦最后一次null消失了，您可以运行算法，找出位置并渲染ItemComponents 在正确的位置并且与initialized={true}（要不就initialized).

让我们看看这是否有效！