javascript - React 15 - 查找元素的 offsetTop 属性

Question

我正在开发一个 React 应用程序，它有两个可点击的元素。为了简单起见，我们假设它们是两个按钮，其中一个按钮的位置高于另一个按钮。

实际上，可能有 30 个这样的按钮，全部位于一个也可以滚动的垂直列表中。

import { Button } from 'react-bootstrap';

<Button ref={(ref) => this.button1 = ref onClick={() => getHeight(this.button1)} }>Top</Button>
<Button ref={(ref) => this.button2 = ref onClick={() => getHeight(this.button2)}}>Bottom</Button>

我需要根据单击的两个按钮来计算一个按钮和另一个按钮之间的相对高度，并使用它动态地为 div 提供高度。

getHeight 函数如下所示:

getHeight = (button) => {
    console.log(button.current.offsetTop);
    // In reality, it would store this y-value somewhere for this button
}

运行此程序时，每当我单击按钮时都会返回undefined。

在 React 中，如何访问元素引用的 offsetTop 属性？我关心的是绝对偏移，而不仅仅是视口(viewport)偏移。这意味着当我向下滚动到屏幕外的按钮时，我会得到相对于页面顶部的真实偏移量，而不仅仅是视觉上的偏移量。

一些值得注意的事项:

• 我使用的是 React 15，而不是 16，并且无权访问 React.createRef 函数。

• 因为这是一个 React 应用程序，如果人们可以建议不涉及 JQuery 的解决方案，那就最好了。

Answer 1

为此，您并不完全需要引用。没有这个也可以完成。您可以创建一个按钮并使用以下代码将 onClick 放在其上，以计算按钮的绝对 Y 位置。

onClick={(e) => {this.getTop(e)}}

getTop = (e) => {
  const elem = e.target;
  const rect = elem.getBoundingClientRect();
  const scrollTop = document.documentElement.scrollTop;
  const absoluteY = scrollTop + rect.top;
}

我做了一个小 fiddle 示例来向您解释这个概念的工作原理。 https://jsfiddle.net/7520ebgf/23/