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

Question

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

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 均已呈现后，如何执行某些代码？
• 如何从 GridComponent 中获取 ItemComponents 的尺寸？
• 然后我应该使用计算出的 ItemComponents 位置重新渲染 GridComponent 还是应该以某种方式直接设置 ItemComponents 的位置？

Answer 1

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

• 函数 componentDidMount 将在所有构造函数之后在父级上调用，每个子级都会调用 componentDidMount，因此这里是调用某些可能依赖于您的状态的函数的好地方
• 按尺寸，我假设您指的是 ItemComponent 的根组件的屏幕宽度和高度，因此在 componentDidMount 中的 ItemComponent 上，您可以设置 ref 并查找 DOM 元素的宽度和高度
• 最好的解决方案是安装但不渲染子项(可以使用一些初始化状态变量或 Prop 来完成)，并且仅在计算出它们的真实最终位置后才渲染它们。例如，每个 ItemComponent 可以有一个名为 initialized 的 prop，在父级找到放置它的位置之前，它是 false。

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

一旦最后一个 null 消失，您就可以运行算法，找出位置，并将 ItemComponent 渲染在正确的位置并使用 initialized={true} (或只是 initialized )。

让我们看看这是否有效!