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

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在渲染所有代码时执行某些代码？
• 如何ItemComponents从GridComponent中获取from 的尺寸？
• 我应该GridComponent用计算的ItemComponents位置重新渲染,还是应该ItemComponents直接设置位置？

Answer 1

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

• componentDidMount在所有构造函数和componentDidMount每个子元素之后,函数将在父元素上调用,因此这里是一个调用某些函数的好地方,可能依赖于你的状态
• 通过尺寸我假定你的意思的根组件的屏幕宽度和高度ItemComponent小号因此上componentDidMount在ItemComponent,可以设置一个ref,并找到的DOM元素的宽度和高度
• 最好的解决方案是挂载但不渲染子节点(可以使用一些初始化状态变量或prop),只有在计算出真正的最终位置后才渲染它们.例如,每个人都ItemComponent可以拥有一个名为initializedfalse 的道具,直到父级找到放置位置.

将所有这些放在一起,因为你的算法可能需要所有维度才能工作,你可能想要在你的父项中创建一个回调,让我们调用它setItemDimensions(id, width, height),componentDidMount每个都调用它ItemComponent.您应该保留所有已初始化的ItemComponents 的映射,并且每次setItemDimensions调用时,检查是否有任何剩余(可能使用所有空值初始化映射并假设在没有空值时它已"准备好").

一旦最后一个null消失,您可以运行算法,找出位置,ItemComponent并使用initialized={true}(或仅仅initialized)将s 渲染到正确的位置.

让我们看看它是否有效!