ReactJS将dynamic类添加到手动类名称

我需要将一个dynamic类添加到常规类的列表中，但不知道如何（我正在使用babel），如下所示：

<div className="wrapper searchDiv {this.state.something}"> ... </div> 

有任何想法吗？

谢谢

Answer 1

你可以做到这一点，正常的JavaScript：

className={'wrapper searchDiv ' + this.state.something}

或string模板版本

className={`wrapper searchDiv ${this.state.something}`}带反引号。

这两种types当然只是JavaScript，但第一种模式是传统的types。 无论如何，在JSX中，大括号内的任何内容都是以javascript的forms执行的，所以基本上可以做任何你想做的事情。 但是，将JSXstring和大括号组合在一起是属性的一种禁忌。

Answer 2

根据您的项目增长需要添加多lessdynamic类，可能值得在GitHub上通过JedWatson检查类名实用程序。 它允许您将您的条件类表示为对象，并将那些评估为true的值返回。

所以作为React文档的一个例子：

 render () { var btnClass = classNames({ 'btn': true, 'btn-pressed': this.state.isPressed, 'btn-over': !this.state.isPressed && this.state.isHovered }); return <button className={btnClass}>I'm a button!</button>; } 

由于React在状态发生变化时触发重新渲染，所以dynamic类名自然处理并随组件的状态保持最新。