2019:

React有很多实用程序。但你不需要任何npm包。只需在某个地方创建函数类名并在需要时调用它;

function classnames(obj){
  return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' ');
}

or

function classnames(obj){
 return Object.entries(obj).map( ([cls,enb]) => enb? cls: '' ).join(' ');
}

例子

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return 'foo pony'

 <div className="foo bar {classnames(stateClass)}"> some content </div>

只为获得灵感

声明helper DOM元素并使用它的本地切换方法:

(DOMToken列表)classList.toggle(类,条件)

例子:

const classes = document.createElement('span').classList; 

function classstate(obj){
  for( let n in obj) classes.toggle(n,obj[n]);
 return classes; 
}
 

我已经试图调整我的答案，以包括所有最好的解决方案。

有很多不同的方法可以做到这一点。

1. 类内嵌

<div className={`... ${this.props.showBulkActions ? 'show' : 'hidden'}`}>
  ...
</div>

2. 使用值

var btnClass = classNames(
  ...
  {
    'show': this.props.showBulkActions,
    'hidden': !this.props.showBulkActions
  }
);

3.使用变量

let dependentClass = this.props.showBulkActions ? 'show' : 'hidden';

className={`... ${dependentClass }`}

4. 使用clsx

<div className={clsx('...',`${this.props.showBulkActions ? 'show' : 'hidden'}`)}>
  ...
</div>

<div className={['foo', condition && 'bar'].filter(Boolean).join(' ')} />

.filter(Boolean)从数组中删除“错误”值。由于类名必须是字符串，因此任何字符串以外的内容都不会包含在新的筛选数组中。

console.log(['foo'， true && 'bar'].filter(Boolean)。Join (' ')) console.log(['foo'， false && 'bar'].filter(布尔值)。Join (' '))

上面写为函数:

const cx = (...list) => list.filter(Boolean).join(' ')

// usage:
<div className={cx('foo', condition && 'bar')} />

var cx = (.. list) => list.filter(布尔兰)。join (' ') 1、log (ex(’foo’&&游戏机’bar’,1 &&’baz’)) log (ex(’foo’游戏机,0 &&’bar’,1 &&’baz’)) log (ex(’foo’游戏机,0 &&’bar’,0 &&’baz’))

2019:

React有很多实用程序。但你不需要任何npm包。只需在某个地方创建函数类名并在需要时调用它;

function classnames(obj){
  return Object.entries(obj).filter( e => e[1] ).map( e=>e[0] ).join(' ');
}

or

function classnames(obj){
 return Object.entries(obj).map( ([cls,enb]) => enb? cls: '' ).join(' ');
}

例子

  stateClass= {
    foo:true,
    bar:false,
    pony:2
  }
  classnames(stateClass) // return 'foo pony'

 <div className="foo bar {classnames(stateClass)}"> some content </div>

只为获得灵感

声明helper DOM元素并使用它的本地切换方法:

(DOMToken列表)classList.toggle(类,条件)

例子:

const classes = document.createElement('span').classList; 

function classstate(obj){
  for( let n in obj) classes.toggle(n,obj[n]);
 return classes; 
}
 

你可以使用这个npm包。它处理所有事情，并基于变量或函数为静态类和动态类提供选项。

// Support for string arguments
getClassNames('class1', 'class2');

// support for Object
getClassNames({class1: true, class2 : false});

// support for all type of data
getClassNames('class1', 'class2', null, undefined, 3, ['class3', 'class4'], { 
    class5 : function() { return false; },
    class6 : function() { return true; }
});

<div className={getClassNames('show', {class1: true, class2 : false})} /> // "show class1"

基于this.props.showBulkActions的值，您可以动态地切换类，如下所示。

<div ...{...this.props.showBulkActions 
? { className: 'btn-group pull-right show' } 
: { className: 'btn-group pull-right hidden' }}>