如何动态地将一个类添加到手动类名中? [英] How to dynamically add a class to manual class names?

问题描述

我需要将一个动态类添加到常规类列表中，但不知道如何(我正在使用 babel)，如下所示:

...

有什么想法吗?

解决方案

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

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

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

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

这两种类型当然都只是 JavaScript，但第一种模式是传统类型.

无论如何，在 JSX 中，大括号中的任何内容都作为 JavaScript 执行，因此您基本上可以在那里做任何您想做的事情.但是结合 JSX 字符串和大括号对于属性来说是行不通的.

I need to add a dynamic class to a list of regular classes, but have no idea how (I'm using babel), something like this:

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

Any ideas?

解决方案

You can either do this, normal JavaScript:

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

or the string template version, with backticks:

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

Both types are of course just JavaScript, but the first pattern is the traditional kind.

Anyway, in JSX, anything enclosed in curly brackets is executed as JavaScript, so you can basically do whatever you want there. But combining JSX strings and curly brackets is a no-go for attributes.

这篇关于如何动态地将一个类添加到手动类名中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！