React通过classnames库添加类

╰+哭是因爲堅強的太久メ 2023-10-02 20:57 20阅读 0赞

### React添加Class的方式 ###

**在vue中添加class是一件非常简单的事情**:

**你可以通过传入一个对象, 通过布尔值决定是否添加类**:

**你也可以传入一个数组**:

<h2 :class="['aaa', 'bbb']">Hello Vue</h2>
    
    <h2 :class="[className1, className2]">Hello Vue</h2>

**甚至是对象和数组混合使用**:

<h2 :class="['aaa', { active: isFlag }]">Hello Vue </h2>

**而在React中就相对繁琐了, React在JSX给了我们开发者足够多的灵活性，你可以像编写JavaScript代码一样，通过一些逻辑来决定是否添加某些class**:

> 例如用三元运算符判断是否添加类

> 或者将要添加的类放在一个数组中, 在让数组中的元素使用空格连接

**当时如果是简单的类, 判断一个类是否添加还是比较容易, 如果需要判断多个, 处理起来就显得比较麻烦, 并且代码的可读性也会显得不友好**

**这个时候我们可以借助于一个第三方的库:classnames**

> 很明显，这是一个用于动态添加classnames的一个库。
> 
> 首先需要安装classnames库: `npm i classnames`

**classNames 是一个函数, 这个函数接受任意数量的参数，可以是字符串或对象**

classNames('foo', 'bar'); // => 'foo bar'
    classNames('foo', {
         bar: true }); // => 'foo bar'
    classNames({
         'foo-bar': true }); // => 'foo-bar'
    classNames({
         'foo-bar': false }); // => ''
    classNames({
         foo: true }, {
         bar: true }); // => 'foo bar'
    classNames({
         foo: true, bar: true }); // => 'foo bar
    classNames('foo', {
         bar: true, duck: false }, 'baz', {
         quux: true }); // => 'foo bar baz quux'
    classNames(null, false, 'bar', undefined, 0, 1, {
         baz: null }, ''); // => 'bar 1'

> 示例代码

render() {
        
      const {
         isActive } = this.state
    
      return (
        <div>
          {
        /* 传入两个字符串, 表示绑定两个class */}
          <h2 className={
        classNames("aaa", "bbb")}>标题</h2>
          {
        /* 明确绑定aaa类, 根据变量的布尔值决定是否绑定bbb */}
          <h2 className={
        classNames("aaa", {
        bbb: isActive})}>标题</h2>
          {
        /* js是无法识别短横线的, 如果是短横线连接的类名, 需要用引号包裹 */}
          <h2 className={
        classNames({
         "aaa-bbb": isActive })}>标题</h2>
          {
        /* 有多个不确定是否添加的类名, 可以使用多个对象 */}
          <h2 className={
        classNames({
        aaa: isActive}, {
        bbb: isActive})}>标题</h2>
          {
        /* 也可以写在一个对象中 */}
          <h2 className={
        classNames({
        aaa: isActive, bbb: isActive})}>标题</h2>
          {
        /* 和vue一样, 也是支持数据的写法, 以及数组和对象的混合写法 */}
          <h2 className={
        classNames(["aaa", "ccc"])}>标题</h2>
          <h2 className={
        classNames(["aaa", {
        bbb: isActive}])}>标题</h2>
        </div>
      )
    }