在react开发中，我们有的时候需要使用js来动态判断是否为组件添加class（类名），classnames 可以很好地帮助我们解决这个问题，下面就介绍下classnames的基本使用方法。

使用 npm 安装 classnames

npm install classnames --save

基本使用

import React, { useState } from 'react'
import classnames from 'classnames'

const App = () => {
    const [clickStatus,setClickStatus] = useState(false);

    const boxClick = () =>{
        setClickStatus(!clickStatus);
    };

    return (
        <div className='box'>
            <div className={
              classnames({
                    'box-content': true,
                    'box-content-color': clickStatus,
              })} 
              onClick={boxClick} 
              >
                Hello,Jack!
            </div>
        </div>
    );
}

export default App;

其他用法

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'

// lots of arguments of various types
classNames('foo', { bar: true, duck: false }, 'baz', { quux: true }); // => 'foo bar baz quux'

// other falsy values are just ignored
classNames(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // => 'bar 1'

let arr = ['b', { c: true, d: false }];
classNames('a', arr); // => 'a b c'

let buttonType = 'primary';
classNames({ [`btn-${buttonType}`]: true });