Как правильно получить clientWidth DOM-элемента после рендеринга?

Question

[alvvi]

Есть компонент навигации, в данный момент он выглядит вот так:

spoiler

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import styles from './Nav.styl';

export default class Nav extends Component {    
    state = {
        boundryOffset: 0,
        boundryWidth: 0
    }

    updateBoundry = (target) => {
        if (target && target.firstChild.classList.contains('active')) {
            this.setState((prevState) => ({
                ...prevState, 
                boundryOffset: target.firstChild.offsetLeft,
                boundryWidth: target.firstChild.clientWidth, 
            }))
        }
    }

    render() {
        return (
            <nav ref="nav" className={styles.nav}>
                <span 
                    style={{
                        transform: `translateX(${this.state.boundryOffset}px)`,
                        width: `${this.state.boundryWidth}px`
                    }}
                    className={styles.boundry}></span>
                <li className={styles.item} 
                    ref={this.updateBoundry}>
                    <NavLink exact className={styles.link} to='/'>Home</NavLink>
                </li>
                <li className={styles.item} 
                    ref={this.updateBoundry}>
                    <NavLink  exact className={styles.link} to='/training'>Decks</NavLink>
                </li>
            </nav>
        );
    }
}

Если кратко: я пытаюсь сделать перемещающийся элемент, который будет находится под активной ссылкой.

Как видно, при вызове ref-callback'a я проверяю содержит ли li активный линк и пытаюсь получить некоторые свойства с этого линка, а потом вызываю setState чтобы вызвать рендеринг и соответственно перемещение элемента boundry, однако проблема в том, что clientWidth возвращает 0, а offsetLeft непонятно откуда взявшиеся 32. Те же результаты я получаю при попытке выбрать эти элементы обычными селекторами в componentDidMount хуке, в остальных хуках и консоле элементы возвращают правильные значения.

вот, здесь при апдейте компонента все посчитается верно, а при маунтинге - нет(

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import styles from './Nav.styl';

import ReactDOM from 'react-dom';

export default class Nav extends Component {
    constructor(props) {
        super();
    }
    
    componentDidUpdate() {
        this.updateBoundry();
    }

    componentDidMount() {
        this.updateBoundry();
    }

    updateBoundry = () => {
        const target = ReactDOM.findDOMNode(this).querySelector('.active');
        const boundry =  ReactDOM.findDOMNode(this).querySelector('.'+styles.boundry);

        
        if (target) {

            boundry.style.transform = `translateX(${target.offsetLeft}px)`
            boundry.style.width =  `${target.offsetWidth}px`

        }
    }

    render() {
        return (
            <nav ref="nav" className={styles.nav}>
                <span className={styles.boundry}></span>
                <li className={styles.item} >
                    <NavLink exact className={styles.link} to='/'>Home</NavLink>
                </li>
                <li className={styles.item}>
                    <NavLink  exact className={styles.link} to='/training'>Decks</NavLink>
                </li>
            </nav>
        );
    }
}

Использую stylus-loader, css-modules, postcss, если это важно.

Answer 1

[Павел Корнилов]

element.getBoundingClientRect() - там есть все, что нужно.

Comments

[alvvi]

Спасибо за ответ, но данный метод тоже возвращает неверные значения: тот же offsetLeft и другое непонятное значение width (вроде бы равное паддингам).

[Павел Корнилов]

Нет. Данный метод возвращает объект со свойствами, отвечающими за расположение элемента на странице.
element.getBoundingClientRect().left - расстояние по оси Х от левой границы окна броузера до левой границы элемента и т.д., мануалы есть.
Если метод выдает не верные значения, значит, страница еще полностью не отрисовалась на момент его вызова, поэтому вызов нужно делать после полной загрузки документа.

[alvvi]

KorniloFF: ну так мой вопрос и заключается в том, почему она не отрисовалась и как это сделать в рамках React'a, что возвращает этот метод я прекрасно знаю)

[Павел Корнилов]

Илья Ростопка: повторюсь, попробуйте вызвать этот метод после полной загрузки и рендеринга документа.

[alvvi]

KorniloFF: я тоже повторюсь: каким образом? В каком методе/функции вы мне предлагаете это сделать?

[alvvi]

KorniloFF: если, скажем, сделать вот так:

componentDidMount() {
        window.addEventListener('load', () => {
            this.updateBoundry();
        })
    }

то сразу после загрузки приложения можно на секунду увидеть, как линия "перемещается" с одного места на другое из-за transition'a. Пока что сделал так так: убрал transition из CSS и добавляю его только после первого апдейта. Но все таки решение выглядит больше как костыль.

Неужели нельзя никак после маунта компонента получить размерность одного из его детей? Ведь по сути дети уже в DOM-е, значит единственное на что тут можно грешить - стили, но как их загрузить перед маунтом у меня пока понимания нет. В любом случае, спасибо.

[Павел Корнилов]

К сожалению или счастью я не знаю Реакт. Пытался подсказать путь, по которому, зная инструментарий Реакта, можно попробовать пройти. Прошу прощения, что не помогло.