Почему эта странная вещь происходит с моим элементом DOM?
Итак, я в основном начал изучать react-redux, и сейчас я создаю какое-то простое приложение для магазина. Я бы представил свою проблему в нескольких пунктах.
У меня есть базовый магазин с некоторыми состояниями и панелью навигации, где у меня есть кнопка «Корзина». После нажатия кнопки корзины я хочу открыть список корзин и повернуть значок корзины на 90 градусов. Я хочу поместить все в одну функцию и прикрепить ее к onClick() мой код выглядит так: https://codepen.io/szygendaborys/pen/wZYZor?editors=0010
Основная проблема в том, что все работает, если я отменяю оператор после else. Вон тот:
else {
style = 'none';
cartArrow.style.transform = 'rotate(0deg)'
}
Если я верну это утверждение, я получу сообщение об ошибке: TypeError: Cannot read property 'style' of null, связанный с
cartArrow.style.transform = 'rotate(0deg)'
Может ли кто-нибудь помочь мне и объяснить, почему оператор if работает, а другой нет?
Ответы 1
Ваш элемент cartArrow, скорее всего, не отобразился в момент вашего запроса DOM (getElementById), что с самого начала является антишаблоном в React. Вместо этого используйте refs.
<i
ref = {(ref) => this.cartArrow = ref}
id='cartArrow'
className = "fas fa-angle-right"
></i>
this.cartArrow.style.transform = 'rotate(0deg)'
Пожалуйста, включите соответствующий код здесь, в Stack Overflow, а не только на внешнем сайте. В коде, который я вижу здесь, нет оператора
if.