Как использовать document.querySelector в React?

Question

[asmut]

Добрый день господа и дамы.

Вхожу в React.
Хочу реализовать сдвиг (движение) .

Что делаю:
const hr = document.querySelector('#hr'); //**здесь ошибка сразу
hr.style.transform = 'rotateZ(${(hh) + (mm/12)}deg)';

Получаю: hr is null

Возможно весь подход неверный.
Первое что интересует: document.querySelector - как в React использовать, и верно ли именно так делать?
Второе: правильно ли менять transform прямо так?

Заранее благодарен за помощь.

Comments

[Islam Ibakaev]

погугли "рефы в реакте"

[asmut]

Islam Ibakaev, спасибо. Полезная информация.
Попробую применить

Answer 1

[8XL]

Говорят, что подобное вообще плохой тон в реакте(в райнем случае есть рефы), но я могу ошибаться.
Касаемо querySelector https://ru.reactjs.org/docs/react-without-jsx.html ознакомьтесь, тут про ваш вопрос.

querySelector: почитайте про рефы, они больше про реакт и jsx.
Трансформ меняется <div style={{transform : `rotateZ(${hh...}deg)`> Элемент, который меняете .

Comments

[asmut]

Спасибо.

Хочу уточнить: имеете ввиду что мой подход неверный применимо к React?

В итоге лучше менять стиль как в вашем приведенном примере?

Статью конечно же прочитал, писать хочу в JSX и Typescript. Более того это крайне важная статья.

[8XL]

Нет, он не неверен в корне. Неоднократно находил в популярных библиотеках подобное решение(поиск элемента DOM через querySelector/elementById. Но здесь же вопрос работы в конкретном фреймворке, а он позволяет выполнить желаемое на его функционале - так почему бы не пользовать, вместо изобретения велосипедов.
Касаемо стиля: в предложенном мной варианте - пользование функционала фреймворка(не просто же так в нем работаем). В вашем же случае - тоже решение, но, как мне кажется, упускающее имеющиеся возможности.

[EPond]

React использует свой собственный DOM, и работать следует только с ним. Иначе теряется смысл React'а.
Стиль должен быть декларативным и основанным на компонентах.

[asmut]

8XL, а вам не кажется. Я почитал статьи и офф также. Говорят что можно написать на JS напрямую к DOM элементам и это будет тоже самое.
И я как и вы не вижу в этом смысла. Тогда проще писать на чистом JS, а не на фреймворка.
Возможно я неверно задал вопрос и сбил вас с толку. Собственно вроде разобрался.
Ещё раз спасибо

[asmut]

EPond, спасибо что не прошли мимо.
Я посмотрел около 10 часов как вообще он строит.
Мог бы поспорить что он использует свой DOM, но это верно.
С другой точки зрения он просто его перестраивает иначе чем обычное приложение, и это менее накладно.

Это не спор, я тут не ради того чтобы рвать рубаху. Если я ошибаюсь, готов услышать верную информацию, тем более если вы уже работаете с ним.

И если вам не трудно можете показать каков этот компонентный подход на примере и как понять что там под капотом (отладка?). Т.е. чтобы мог самостоятельно смотреть глубже.
Заранее благодарен