Question

所以我基本上开始学习react-redux，并且我正在创建一些简单的商店应用程序。我将在几个要点中介绍我的问题。

我有一个带有一些状态的基本商店，还有一个具有“购物车”按钮的导航栏。单击购物车按钮后，我要打开购物车列表，并将购物车图标旋转90度。我想将所有内容放在一个函数中并将其附加到onClick（）我的代码如下：https://codepen.io/szygendaborys/pen/wZYZor?editors=0010

主要问题是，如果我以后再取消该语句，则所有方法都有效。那个：

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

如果我放回该语句，则会收到错误消息：TypeError：无法读取已连接的null的'style'属性

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

谁能帮助我并解释为什么if语句起作用，否则else无效？

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

为什么这奇怪的事情发生在我的DOM元素上？

1 个答案: