简化react中的className的操作
Inspired by JedWatson/classnames
- 合并 对象,字符串,数组中的有效类名
- 类名的有效性校验(去掉数字开头的类名)
- 去掉重复的类名
npm:
npm install fe-classnames --save
yarn:
yarn add fe-classnames
import classNames from 'fe-classnames';
class ComponentA extends React.Component {
render () {
const cls = classNames('btn', {
'online': true,
'offLine': false,
}, ['btn-active'])
<div className={cls}>例子</div>
// Output: <div className="btn online btn-active">例子</div>
}
}
PASS test/index.test.js
classNames
✓ 所有数据类型 (5ms)
✓ 去重
✓ React (1ms)
PASS test/util.test.js
判断标识符
✓ 有效的 startWith - _ a-z A-Z (4ms)
✓ 无效的以数字开头的 (1ms)
✓ 无效的输入 (2ms)
----------|----------|----------|----------|----------|-------------------|
File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s |
----------|----------|----------|----------|----------|-------------------|
All files | 100 | 95.24 | 100 | 100 | |
index.js | 100 | 94.74 | 100 | 100 | 19 |
identifier.js | 100 | 100 | 100 | 100 | |
----------|----------|----------|----------|----------|-------------------|
Test Suites: 2 passed, 2 total
Tests: 6 passed, 6 total