Как захватить класс в функции reactjs?

Question

[arklight]

Недавно начал изучать реакт и стало интересно, как захватить класс из модульного css

const Bar = (props) => {
    return (
        <div className={b.item}>
            <span className={b.name}>{props.nameSkill}</span>
            <div className={b.max_bar}>
                <div className={b.percent_bar} onLoad={bar}>{props.percent}%</div>
            </div>
        </div>
    );
    function bar() {
        const elem = document.querySelector(".percent_bar");
        const w = props.percent;
        const opercent = document.querySelector(".max_bar").style.width / 100;
        elem.style.width = w * opercent + "px";
    }
};

Мне надо в функции bar, в переменную elem захватить элемент с классом .percent_bar (который находится в модульном css, в разметке тут выглядит как b.percent_bar), аналогично с переменной opecent. Но у меня почему-то не пошло, даже когда пытался вставить таким путём

const opercent = document.querySelector(b.max_bar).style.width / 100;

ибо получается вот это

const elem = document.querySelector(_Bar_module_css__WEBPACK_IMPORTED_MODULE_1___default.a.percent_bar);

Как мне в захватить этот класс?

Answer 1

[McBernar]

div style={{width: props.percent}}

Забудьте о поиске селекторов в реакте и прямом обращении к дом-дереву.

Comments

[arklight]

Спасибо большое!

Answer 2

[Владимир Проскурин]

В реакте не стоит обращаться к элементам DOM не через реакт, это плохая практика. Почитайте про рефы на DOM элементы https://ru.reactjs.org/docs/refs-and-the-dom.html

UPD: И как правильно заметил Pardon Me! Where Do I Find 4giveness? ваша функция bar реализуется реактивностью. Обращение к элементам DOM нужно только в крайних случаях (например, для получения каких-то свойств типа offsetHeight), это не тот случай.

Comments

[Владимир Проскурин]

Pardon Me! Where Do I Find 4giveness?, а слона то я не приметил