Некорректный offsetLeft в ref?

Question

[Wondermarin]

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

Делаю так:

export class Tooltip extends Component {
  constructor(props) {
    super(props);
    this.elementRef = React.createRef();
    this.tooltipRef = React.createRef();
  }
  
  componentDidMount() {
    if (typeof this.elementRef !== 'undefined') {
      console.log(this.elementRef.current.offsetLeft);
    }
  }
  
  render() {
    const {
      title,
      children,
    } = this.props;

    return(
      <>
        {React.cloneElement(children, { ref: this.elementRef })}
        {title ? (
          <Portal>
            <div ref={this.tooltipRef} className={styles.tooltip}>{title}</div>
          </Portal>
        ) : null}
      </>
    );
  }
}

В консоли я получаю 5 (условно), что является некорректным результатом.

Если я в консоли вместо:

if (typeof this.elementRef !== 'undefined') {
      console.log(this.elementRef.current.offsetLeft);
    }

Сделаю так:

if (typeof this.elementRef !== 'undefined') {
      console.log(this.elementRef);
    }

То в current будет offsetLeft: 20 - что является корректным значением.

Вопрос: почему так происходит?

Answer 1

[Алексей Уколов]

Скорее всего, у вас после маунта происходит ещё какое-то изменение элемента, которое и меняет значение. Анимация или ещё что-то подобное.
Когда вы выводите весь ref в консоль и получаете значение оттуда, это происходит намного позже маунта, когда всё уже встало на свои места.

Попробуйте сделать так и проверьте:

componentDidMount() {
  setTimeout(
    () => {
      if (typeof this.elementRef !== 'undefined') {
        console.log(this.elementRef.current.offsetLeft);
      }
    },
    5000
  )
}

Comments

[Wondermarin]

Да, вы оказались правы, действительно что-то изменяет элемент, но что?
Хотя это уже больше ко мне вопрос. В любом случае, спасибо.