Wondermarin
@Wondermarin

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

Здравствуйте, передаю дочернему компоненту 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 - что является корректным значением.

Вопрос: почему так происходит?
  • Вопрос задан
  • 101 просмотр
Решения вопроса 1
alexey-m-ukolov
@alexey-m-ukolov Куратор тега React
Скорее всего, у вас после маунта происходит ещё какое-то изменение элемента, которое и меняет значение. Анимация или ещё что-то подобное.
Когда вы выводите весь ref в консоль и получаете значение оттуда, это происходит намного позже маунта, когда всё уже встало на свои места.

Попробуйте сделать так и проверьте:
componentDidMount() {
  setTimeout(
    () => {
      if (typeof this.elementRef !== 'undefined') {
        console.log(this.elementRef.current.offsetLeft);
      }
    },
    5000
  )
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы