js：React中使用classnames实现按照条件将类名连接起来

参考文档

1. https://www.npmjs.com/package/classnames
2. https://github.com/JedWatson/classnames

安装

npm install classnames
1

示例

import classNames from "classnames";

// 字符串合并
console.log(classNames("foo", "bar")); // foo bar

// 对象合并
console.log(classNames({ foo: true, bar: false })); // foo

// 动态名称
let buttonType = "primary";
console.log(classNames({ [`btn-${buttonType}`]: true })); // btn-primary

1
2
3
4
5
6
7
8
9
10
11
12

Vue中的类名可以这么写

<div :class="{
    'foo': true,
    'bar': false
}">
1
2
3
4

React中可以借助classnames实现

App.css

.foo {
  background-color: green;
}

.bar {
  color: red;
}
1
2
3
4
5
6
7

App.jsx

import React from "react";
import classNames from "classnames";
import "./App.css";

export default function App() {
  const boxClasses = classNames({
    bar: true,
    foo: true,
  });

  return <div className={boxClasses}>App</div>;
}

1
2
3
4
5
6
7
8
9
10
11
12
13

页面渲染的元素

<div class="bar foo">Appdiv>
1