Question

我是一名React新手并且有一个问题！

我发布这个是因为我还没有找到一个明确的答案，说明在React中为HTML添加/删除类的最佳方法是什么。我已经创建了我的第一个React应用程序，并且我想通过在某个动作发生时添加/删除类来开始动画我的应用程序的一些元素。

这就是我所做的：

我已经传递了要通过状态设置动画的元素类。州的初始值如下：

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的状态更新为＆＃34; order-wrap cart-out＆＃34;因此添加了一个包含CSS动画效果的额外类。

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

感谢您的帮助！

Answer 1

我建议你使用ReactCSSTransitionGroup。您可以设置转换名称，而不是设置className，而不是：

<ReactCSSTransitionGroup 
    transitionName="example" 
    transitionEnterTimeout={500} 
    transitionLeaveTimeout={300}
>
    ... some code here ..
</ReactCSSTransitionGroup>

请参阅this page以了解有关React中动画的更多信息。

Answer 2

这是我通常做的事情。我创建了一个包含类名的变量，并将此变量放在我的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>
  );
}

希望这会有所帮助：）

Answer 3

有一个名为classnames的javascript实用程序，可用于连接多个类名。

这是他们的github页面的link 这提供了更清晰，我发现它更直观易懂。例如，您的代码可以写为

var cartClasses = classNames('order-wrap',{'cart-out':  newTotalClean!=0});

上面说默认情况下会有一个名为order-wrap的类，只有满足条件，才会分配另一个类。

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

3 个答案: