rstJkee
@rstJkee

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

Недавно начал изучать реакт и стало интересно, как захватить класс из модульного 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);

Как мне в захватить этот класс?
  • Вопрос задан
  • 63 просмотра
Решения вопроса 2
@McBernar
div style={{width: props.percent}}

Забудьте о поиске селекторов в реакте и прямом обращении к дом-дереву.
Ответ написан
Vlad_IT
@Vlad_IT Куратор тега CSS
Front-end разработчик
В реакте не стоит обращаться к элементам DOM не через реакт, это плохая практика. Почитайте про рефы на DOM элементы https://ru.reactjs.org/docs/refs-and-the-dom.html

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

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

Войти через центр авторизации
Похожие вопросы