у меня компонент, в виде горизонтального меню с горизонтальным скроллом. Стояла задача, отображать активную ссылку по центру родительского компонента. Решил таким образом, используя 2 хука:
const urlParams = useParams();
useEffect(() => {
const menuRowActiveItem = document.querySelector('.food-menu__link.active').parentElement;
menuRowActiveItem.scrollIntoView({inline: 'center', behavior: 'smooth'})
},[urlParams])
Вопрос: насколько такое прямое обращение к DOM элементам "законно" в рамках реакта? Если решение плохое, посоветуйте пожалуйста куда думать
Подскажите пожалуйтса
рендерить нужно с map, там указывать в style жные стили, если active === true
а так к селекторам обращаться без отсутствия других вариантов не надо
нужно хранить в данные Links в массиве, это в принципе правильно, а не писать ручками одинаковые компоненты с разными children и href
Если обратите еще раз внимание, там речи о стиля не идет. Я вызываю на активной ссылке метод scrollIntoView
можно отследить событие click
вероятно уже ответили, но все же напишу, что реакт все же со своим домом работает, а то что внесено насильно не помнит и не знает. это подход джиквери. нужно в самих элементах делать так чтобы показывало как надо. переменные добавлять или стили которые буду при условии показываться.
Ну конкретно в моем случае же, я толком никаких операции с DOM не произвожу, по крайней мере с данными. Метод scrollIntoView грубо говоря "скроллит" родительский элемент до предка, на котором он был вызван.
Обсуждают сегодня