ReactJS：如何设置硬编码和动态calssName？

Question

标题可能令人困惑，所以这是一个例子......

for (var i = 0; i < this.state.list.length; i++) {
    <td className={'blah_'+this.state.list[i].id}></td>
}

这导致<td class="blah_1">，但如果您需要将硬编码的类名与class="blah_1"一起放置，该怎么办？

<td className={'blah_'+this.state.id, 'another-class'}></td>

最终<td class="another-class">。

<td className={'blah_'+this.state.id}  className="another-class></td>

这一次。

所以，我的目标是获得<td class="blah_1 another-class">，这意味着一个是动态确定的，另一个是硬编码的。对不起，这个问题听起来太基本了，但我是新手做出反应，在官方文档中找不到答案。

如果您愿意提供任何见解，我将不胜感激。

Answer 1

使用模板字符串。

<td className={`blah_${this.state.id} another-class`}></td>

Answer 2

虽然可能有几种奇特的方法，但鉴于对你的问题中发生的事情的明显混淆，绝对值得注意的是，这只是javascript输出一个字符串className变为{{1在html元素上，所以只需添加另一个的名称，就像在html中一样：

class

Answer 3

这对于https://github.com/JedWatson/classnames来说是惊人的，我们在动态和静态类混合的所有组件上使用它

但在此之前我会使用以下功能：

getClass() {
 const class = 'base-class';

 if (this.state.id) {
   class += ' blah_" + this.state.id  
 }

 return class
}

然后将className分配给getClass()返回

如果您使用第三方插件，则可以执行以下操作：

const classes = classnames('base-class', {
 ['blah_' += this.state.id] : true,
 disabled: this.props.disabled
}

这将返回可以应用于元素className属性的正确类字符串。无论哪种方式都有效，但就可读性而言，我更喜欢使用插件。