时间戳

首页 > 解决方案 > 为什么我的 DOM 元素会发生这种奇怪的事情？

reactjs - 为什么我的 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 connected to

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

谁能帮助我并解释为什么 if 语句有效而 else 无效？

标签： reactjsredux

解决方案

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

推荐阅读