时间戳

首页 > 解决方案 > 在 React 中测量一系列 DOM 元素的绝对位置

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

问题描述

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

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

标签： javascripthtmlreactjsdom

解决方案

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

解决此问题的一种简单方法是使用 Map 而不是 fill like

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

工作演示

推荐阅读