我需要添加一个动态类到常规类的列表,但不知道如何(我使用babel),类似这样的东西:

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

什么好主意吗?


当前回答

不要想这么复杂的解决办法。

这是对你的问题最简单的解决办法。

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

其他回答

对于那些在React中使用反勾号或串联的className的人来说,一个警告:你需要在你的类名之间有空格。没有它们,你就有一个不匹配任何css的长单词。

如果你使用css模块,这对我来说是有用的。

const [condition, setCondition] = useState(false);

\\ toggle condition

return (
  <span className={`${styles.always} ${(condition ? styles.sometimes : '')`}>
  </span>
)

你可以这样做,普通的JavaScript:

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

或者字符串模板版本,带反引号:

className={`wrapper searchDiv ${this.state.something}`}

当然,这两种类型都是JavaScript,但第一种模式是传统模式。

无论如何,在JSX中,花括号括起来的任何内容都作为JavaScript执行,因此基本上可以在那里做任何想做的事情。但是将JSX字符串和花括号组合在一起是不适合属性的。

取决于你需要添加多少动态类,因为你的项目增长,它可能值得检查类名实用程序由JedWatson在GitHub。它允许您将条件类表示为对象,并返回那些求值为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会在状态发生变化时触发重新渲染,因此动态类名会被自然地处理,并与组件的状态保持同步。

如果你需要根据状态条件显示的样式名,我更喜欢使用这种结构:

<div className={'wrapper searchDiv' + (this.state.something === "a" ? " anotherClass" : "")'}>