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

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

reactjs

Reactjs 反应-如何获取组件子元素的大小并重新定位它们,reactjs,Reactjs,我有一个组件，它在动态网格中排列元素，如下所示： class GridComponent extends React.Component { render() { return <div> {items.map(function(item){ return <ItemComponent someData={item}/>; })} </div> } } 类GridComponent扩展了Re

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

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

类GridComponent扩展了React.Component{
render（）{
返回
{items.map（函数（项）{
返回；
})}
}
}

现在我想根据一些算法定位

ItemComponents

，这需要单个

ItemComponents

维度

所以我想，我需要：

呈现所有

ItemComponents

获取所有

项目组件的维度（仅在渲染后固定）


根据我的算法重新定位ItemComponents
所以我的问题是如何做到这一点，或者更具体地说：

当所有ItemComponents
都已呈现时，如何执行某些代码
如何从GridComponent中获取ItemComponents
的维度
然后，我应该使用计算的ItemComponents
位置重新输入GridComponent
，还是直接设置ItemComponents
的位置
这是一个非常酷的想法，您完全可以使用内部状态和一些生命周期方法来实现这一点。要回答您的每个问题，请执行以下操作：

函数componentDidMount
将在所有构造函数和每个子函数的componentDidMount
之后在父函数上调用，因此这里是调用某些函数的好地方，这些函数可能取决于您的状态
通过维度，我假设您指的是ItemComponent
s根组件的屏幕宽度和高度，因此在ItemComponent
中的componentDidMount
上，您可以设置ref
并找到DOM元素的宽度和高度
最好的解决方案是挂载但不渲染子对象（可以使用一些初始化状态变量或prop完成），并且仅在计算它们的真实最终位置后渲染它们。例如，每个ItemComponent
都可以有一个名为initialized
的道具，该道具在父级找到放置它的位置之前为false

把所有这些放在一起，因为您的算法可能需要所有维度才能工作，所以您可能需要在父级中创建回调，我们称之为setItemDimensions（id，width，height）
，它在每个ItemComponent
的componentDidMount
上被调用。您应该保留所有已初始化的ItemComponent
s的映射，每次调用setItemDimensions
时，检查是否还有剩余的映射（可以使用所有空值初始化映射，并假设它在没有空值的情况下处于“就绪”状态）
一旦最后一个null
消失，您就可以运行该算法，找出位置，并使用initialized={true}
（或刚刚initialized
）在正确的位置渲染ItemComponent
）
让我们看看这是否有效
 酷，我要试试这个！装载但不渲染组件的最佳方法是什么？只需设置“显示：无”？@Nathan returnnull@JamesBrierley好啊但是它没有我可以用来计算的大小/尺寸……是的，如果你想测量元素，那么你必须渲染它们。没有办法。你也可以做opacity:0