react componentDidMount中如何获取元素的准确offsetTop？答案

【问题标题】：How to get the accurate offsetTop of elements in react componentDidMount？react componentDidMount中如何获取元素的准确offsetTop？
【发布时间】：2020-05-01 04:03:03
【问题描述】：

有一个天花板tabBar，代表我页面的不同部分，我尝试在componentDidMount中获取每个部分的offsetTop，然后我可以通过比较document.element.scrollTop和offsetTop来切换tabBar。但是我发现我无法在 componengtDidMount 中获取每个部分的正确 offsetTop，因为元素没有被完全渲染。

这里有一些相关代码

const tabList = [
  {
    title: 'xxxx1',
    id: 'feature',
    offsetTop: 0
  },
  {
    title: 'xxxx2',
    id: 'compensation',
    offsetTop: 0
  },
  {
    title: 'xxxx3',
    id: 'faq',
    offsetTop: 0
  },
  {
    title: 'xxxx4',
    id: 'form',
    offsetTop: 0
  }
]

 componentDidMount() {
    this.getEleOffsetTop()
  }

  getEleOffsetTop = () => {
    tabList.forEach(item => {
      let node = document.getElementById(`${item.id}`)
      if (node) {
        item.offsetTop = node.offsetTop
      }
    })
    console.log('tabList', tabList)
  }

【问题讨论】：

标签： javascript html reactjs frontend

【解决方案1】：

我正在使用数据滚动到刚刚安装的新组件的顶部。

  import ReactDOM from 'react-dom';

  componentDidMount() {
    var n = ReactDOM.findDOMNode(this).getBoundingClientRect();

  }

【讨论】：

我有一些功能子组件，所以我不能用这个

【解决方案2】：

你可以从节点获取 offsetTop。

import ReactDOM from 'react-dom';

componentDidMount() {
    var rect = ReactDOM.findDOMNode(this);
      console.log(rect.offsetTop);
  }

【讨论】：

我正在尝试在父组件的 componentDidMount 中获取子组件的 offsetTop，但是有一些子组件是功能组件（没有 componentDidMount）

【解决方案3】：

在构造函数中：

 this.someRefName = React.createRef();

在函数中

let offsetTop = this.someRefName.current.offsetTop;

另一种解决方案是：

var n = ReactDOM.findDOMNode(this);
console.log(n.offsetTop);

嘿，成功了吗？

【讨论】：