【笔记】classnames学习笔记

发表于 更新于 分类于 阅读次数：

前言

A simple javascript utility for conditionally joining classNames together（Github）

React通过JedWatson/classnames实现复杂的class属性定义

下载依赖

1
npm install -D classnames

定义类名

传递字符串

1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import classnames from "classnames";

class Component extends React.Component {
  render() {
    return (
      <>
        <div className={classnames("class-name-1", "class-name-2")}></div>
      </>
    );
  }
}

传递对象

  • 对象的属性名为class名，属性值为true或false表示是否添加该class名
1
2
3
4
5
6
7
8
9
10
11
12
import React from "react";
import classnames from "classnames";

class Component extends React.Component {
  render() {
    return (
      <>
        <div className={classnames({ "class-name-1": true, "class-name-2": false })}></div>
      </>
    );
  }
}

完成