Question

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

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

Answer 1

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

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

那样填充

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

Working demo

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

1 个答案: