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

问题描述

我需要将动态类添加到常规类列表中，但是不知道如何(我正在使用babel)，像这样:

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>

有什么想法吗?

推荐答案

您可以使用普通的JavaScript进行此操作:

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}`}

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

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

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

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屋！