在 React 中以编程方式分配 css 类

Question

在我的 React 应用程序中，我有一组分配给各种元素的类。 它们被命名为按钮 1、按钮 2、按钮 3 等。 目前，我正在使用 switch 语句来确定要分配的类。

switch (num) {
case 1:
return {
memberButton: styles.button1
};
case 2:
return {
memberButton: styles.button2
};
case 3:
return {
memberButton: styles.button3
};
}

有没有办法通过执行以下操作来分配类：

className={styles.button + rowNumber} 

当然，这是行不通的。 我试图通过在代码中构造类名来消除对 switch 语句的需求。

Answer 1

Yo 应该这样做：

className={styles[`button${rowNumber}`]} 

Answer 2

您需要使用括号来访问使用变量的对象哈希值，因为变量不能与点表示法一起使用。 例如：

styles = {
'button1': 'button 1 styles',
'button2': 'button 2 styles',
'button3': 'button 3 styles',
}

然后你会做：

className={ styles[`button${rowNumber}`] }

简而言之 - 使用点表示法，您不能使用变量，但使用括号表示法可以使用。

Answer 3

您可以尝试以下方法

<div className={"form-group "+ this.props.errorMessage.roleError ?this.props.errorMessage.roleError : '' +" has-feedback"}></div>

另一个带有模板文字

<div className={`form-group ${this.props.errorMessage.roleError ?this.props.errorMessage.roleError : ''} has-feedback`}></div>

在您的代码中

className={ styles[`button${rowNumber}`] } 

或

className={styles['button'+rowNumber+'''] }