Почему эта странная вещь происходит с моим элементом DOM?

Question

Итак, я в основном начал изучать реагировать на избыточность, и я нахожусь в процессе создания простого приложения для магазина. Я бы изложил свою проблему в нескольких пунктах.

У меня есть базовый магазин с некоторыми состояниями и Navbar, где у меня есть кнопка Корзина. После нажатия кнопки корзины, я хочу открыть список корзины и повернуть значок корзины на 90 градусов. Я хочу поместить все в одну функцию и прикрепить ее к onClick () мой код выглядит так: https://codepen.io/szygendaborys/pen/wZYZor?editors=0010

Основная проблема в том, что все работает, если я отменяю оператор после else. Вот этот:

else {
style = 'none';
cartArrow.style.transform = 'rotate(0deg)'
}

Если я возвращаю это утверждение, я получаю ошибку: TypeError: Невозможно прочитать свойство 'style' для null, связанного с

cartArrow.style.transform = 'rotate(0deg)'

Может кто-нибудь помочь мне и объяснить, почему утверждение if работает, а другое нет?

Answer 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)'