在 React 中测量一系列 DOM 元素的绝对位置

Question

沙盒：https://codesandbox.io/s/8292lmypz2

我正在尝试测量一些divs 的绝对位置。我通过转发的ref (React.forwardRef()) 访问div 的DOM 节点到我感兴趣的div。在我的父组件的构造函数中，我用React.createRef() 填充一个数组s，然后我在渲染每个 div 时迭代地分配给它们。最后，我为每个 div 记录 getBoundingClientRect() 的返回值。问题是——尽管每个 div 相对于下一个 div 具有唯一的位置——但每次都返回相同的数据。就好像我为同一个 div 获取了八次 getBoundingClientRect() 数据。什么给了？

Answer 1

在您的情况下，一个非常基本的问题是，为了创建引用数组，您使用Array.fill 方法，该方法使用React.createRef 的相同引用初始化数组中的所有值，因此当您尝试 assign refs 到 div，所有 ref 属性将引用最后一个分配 ref 实例的 div

解决此问题的一种简单方法是使用 Map 而不是像填充一样

constructor(props) {
    super(props);
    this.refArray = Array.apply(null, { length: props.number.length}).map(() => React.createRef());
  }

Working demo