Question

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

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

现在我想基于某种算法定位ItemComponents，这需要单独的ItemComponents尺寸。

所以我想，我需要：

渲染所有ItemComponents
获取所有ItemComponents的尺寸（仅在渲染后修复）
根据我的算法重新定位ItemComponents

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

如果在呈现所有ItemComponents后如何执行某些代码？
如何从GridComponent中获取ItemComponents的尺寸？
我是否应该使用计算出的GridComponent位置重新呈现ItemComponents，还是应该直接设置ItemComponents的位置？

Answer 1

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

函数componentDidMount将在每个子节点的所有构造函数和componentDidMount之后调用父节点，因此这里是调用某些可能依赖于您的状态的函数的好地方
维度我假设您的意思是ItemComponent的根组件的屏幕宽度和高度，因此在componentDidMount的{{1}}上，您可以设置ItemComponent并查找DOM元素的宽度和高度
最好的解决方案是挂载但不渲染子节点（可以使用一些初始化状态变量或道具），只有在计算出真正的最终位置后才渲染它们。例如，每个ref都可以有一个名为ItemComponent的道具，在父项找到放置位置之前它是假的。

将所有这些放在一起，因为您的算法可能需要所有维度都可以使用，您可能希望在父级中创建一个回调，让我们称之为initialized调用每个setItemDimensions(id, width, height)的{{1}}。您应该保留所有已初始化的componentDidMount的地图，并且每次调用ItemComponent时，请检查是否有任何剩余（可能会使用所有空值初始化地图并假设它为＆＃39; s＆＃34;准备就绪＆＃34;当没有空值时。）

一旦最后ItemComponent消失，您可以运行算法，找出位置，并使用setItemDimensions（或null将ItemComponent呈现在正确的位置1}}）。

让我们看看它是否有效！

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

1 个答案: