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

IT技术 reactjs
2021-05-05 10:27:22

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

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直接设置 的位置？
1个回答

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

  • 该函数componentDidMount将在所有构造函数和componentDidMount每个孩子之后在父级上调用，因此这里是调用某些可能依赖于您的状态的函数的好地方
  • 通过尺寸，我假设您的意思是ItemComponents的根组件的屏幕宽度和高度，因此在componentDidMountin 上ItemComponent，您可以设置 aref并找到 DOM 元素的宽度和高度
  • 最好的解决方案是挂载但不渲染子项（可以使用一些初始化状态变量或props来完成），并且只有在计算出它们的真实最终位置后才渲染它们。例如，每个都ItemComponent可以有一个名为initializedfalse的 prop ，直到父级找到放置它的位置。

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

一旦最后一个null消失，您可以运行算法，找出位置，并ItemComponent在正确的位置使用initialized={true}（或仅使用initialized）渲染s 。

让我们看看这是否有效！

其它你可能感兴趣的问题
上一篇React Navigation 参数不会重置 下一篇如果我不需要任何props，我应该用 React.memo() 包装我的所有组件吗？