react classnames 使用

在react原生动态添加多个className会报错。

在react中想要动态添加className时，通过就会使用classnames这个库。

安装

npm i classnames --save

使用

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'

数组方式

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

import React, { useState } from 'react';
import classNames from 'classnames';
import styles from './index.module.css';

const Index = () => {

  const [active, setActive] = useState(true);

  return (
    <div>
      <div className={classNames({
        'title': true,
        'class1':true,
        'class2': false
      })}>测试标题</div>
      <div className={classNames(styles.title,{
        'con':true
      }) }>测试内容</div>

    </div>
  );
}

export default Index;

使用bind方式（推荐）

import React, { useState } from 'react';
import classNames from 'classnames/bind';
import styles from './index.module.css';

const cx = classNames.bind(styles);

const Index = () => {

  const [active, setActive] = useState(true);

  return (
    <div>
      <div className={cx('title')}>
      测试标题
      </div>
      <div className={cx('list', active && 'con')}>测试数据</div>
    </div>
  );
}

export default Index;

在日常的开发中我们可以把 className={cx('')}这种频繁使用的利用vscode插件快速生成