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

在我的React应用程序中，我有一组分配给各种元素的类。它们被命名为button1、button2、button3等。目前我正在使用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} 

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

---

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

你应该这样做：

className={styles.button + rowNumber} 

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

---

您可以尝试以下方法

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

或

---

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

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

那么你就做：

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

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

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