Как получить точное смещение верхней части элемента в реагирующем компоненте DidMount？

Question

Существует потолок tabBar, который представляет различную часть моей страницы, и я пытаюсь получить offsetTop каждой части в componentDidMount, затем я могу переключить tabBar, сравнив document.element.scrollTop со offsetTop. Однако я обнаружил, что не могу получить правильное значение offsetTop для каждой части в componentengtDidMount ，, поскольку элементы не были полностью отрисованы.

здесь приведен некоторый относительный код

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)
  }

Answer 1

Вы можете просто получить смещение от узла.

import ReactDOM from 'react-dom';

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

Answer 2

Я использую данные для прокрутки к вершине нового компонента, который только что смонтирован.

  import ReactDOM from 'react-dom';

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

  }

Answer 3

В конструкторе:

 this.someRefName = React.createRef();

В функции

let offsetTop = this.someRefName.current.offsetTop;

---

Другое решение:

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

эй, это работает?