javascript - 在 React 中添加/删除类的正确方法

Question

我是 React 新手，有一个问题!

我发布这个是因为我无法找到关于在 React 中向 HTML 添加/删除类的最佳方法的明确答案。我已经创建了我的第一个 React 应用程序，并且到了我想通过在某个 Action 发生时添加/删除类来开始为我的应用程序的某些元素设置动画的地步。

这是我所做的:

我已经通过一个状态传递了我想要设置动画的元素类。状态被赋予一个初始值，如下所示:

getInitialState: function() {
    return {
       cartClasses:"order-wrap"
       }
}

然后我将状态传递给接收状态并实现购物车类的子组件，如下所示:

<div className={this.props.cartClasses}>

在我的一个函数中，我有以下 if 语句:

 newTotalClean != 0 ? this.setState({cartClasses:"order-wrap cart-out"}) : this.setState({cartClasses:"order-wrap"});

基本上它会评估我的一个名为 newTotalClean 的变量，如果它不等于 0，它会将 cartClasses 的状态更新为“order-wrap cart-out”，从而添加一个包含 CSS 动画效果的额外类。

通常我会使用 jQuery Add/removeClass()，但我试图限制自己使用它并以更 React 的方式进行，不确定以状态存储类是否是最好的方法？

感谢您的帮助!

Answer 1

这是我经常做的。我创建了一个包含类名的变量，并将该变量放入我的 jsx 中。类似的东西:

magic: function() {
  var myClass = this.state.cartClasses;

  if (condition) {
    this.setState({ cartClasses: 'class1' });
  } else {
    this.setState({ cartClasses: 'class2' });
  }  

  return (
    <div className={myClass}>
      hello world
    </div>
  );
}

希望这有帮助:)