React 设置多个className

最新推荐文章于 2025-02-05 17:04:24 发布

wmnmtm

最新推荐文章于 2025-02-05 17:04:24 发布

阅读量3.5k

点赞数

分类专栏： js react

原文链接：https://blog.youkuaiyun.com/qq_35605231/article/details/84974029

版权

js 同时被 2 个专栏收录

19 篇文章

订阅专栏

react

16 篇文章

订阅专栏

这篇博客介绍了在React中动态地为元素添加样式类名的三种常见方法：使用ES6模板字符串、使用join('')方法以及使用classnames库。作者分享了个人偏好第二种方法的原因，因为它代码简洁且易于对className数组进行增删操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一个元素上设置样式，有一个固定的样式，然后还有一个使用三元运算符根据条件添加的样式。

比如说有一个固定样式"title":

<div className="title">标题</div>，

然后还要一个点击高亮的样式:

<div className={index === this.state.active ? "active" : null}>标题</div>

不能这样写：

<div className="title" className={index === this.state.active ? "active" : null}>标题</div>

方法一：ES6 模板字符串 ``

className={`title ${index === this.state.active ? 'active' : ''}`}

方法二：join("")

className={["title", index === this.state.active?"active":null].join(' ')}

方法三：classnames(需要下载classnames)

const classNames = require('classnames');
 
const Button = React.createClass({
  // ...
  render () {
    const btnClass = classNames({
      btn: true,
      'btn-pressed': this.state.isPressed,
      'btn-over': !this.state.isPressed && this.state.isHovered
    });
    return <button className={btnClass}>{this.props.label}</button>;
  }
});

个人喜好第二种，一方面代码量少，另一方面方便对 className数组的增加与删除。
————————————————
版权声明：本文为优快云博主「sky_Wolf丶」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.youkuaiyun.com/qq_35605231/article/details/84974029