React项目模板-classnames库的使用（react官方

官方参考：npm、github

一、classnames的用处

在react开发中，我们有的时候需要使用js来动态判断是否为组件添加class（类名），这里我们使用到了classnames.

二、classnames的安装引入

安装

npm install classnames --save

引入

import classnames  from 'classnames';

三、classnames的使用

<Button className={classnames({
    //这里可以根据各属性动态添加，如果属性值为true则为其添加该类名，
    //如果值为false，则不添加。这样达到了动态添加class的目的
      base: true,
      inProgress: this.props.store.submissionInProgress,
      error: this.props.store.errorOccurred,
      disabled: this.props.form.valid,
    })}>
<Button/>

  const liClass = classNames({
    'list-group-item d-flex justify-content-between align-items-center item-component': true,
    active: selected,
  });
  const spanClass = classNames({
    'badge badge-pill': true,
    'badge-secondary': !selected,
    'badge-light': selected,
  });
  return (
    <a
      href="#"
      className={liClass}
      onClick={onClick}
    >
      {item.title}
      <span className={spanClass}>
        {formatTime}
      </span>
    </a>
  );
//selected是组件传入的参数;
//诸如这些类名，是在app.jsx中传入的   import 'bootstrap/scss/bootstrap.scss'; 即bootstarp中的样式；
//或者在该组件的页面，传入的 import './style.scss'中的类名。
//classNames()传入的是一个对象，其中键是类名，值是true/false的表达式；
//active的作用是表示该ListItem是否被激活。

//综上：
//利用classNames定义类名/类名系列
const itemClass = classNames({});
...
//在标签中使用{}引入该定义
<span className={itemClass}>