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

【问题标题】：Programmatically assigning css classes in React在 React 中以编程方式分配 css 类
【发布时间】：2020-01-02 23:17:58
【问题描述】：

在我的 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}

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

【问题讨论】：

标签： css reactjs react-css-modules

【解决方案1】：

您可以尝试以下方法

<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+'\''] }

【讨论】：

【解决方案2】：

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

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

那你就这样做：

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

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

【讨论】：

【解决方案3】：

你应该这样做：

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

【讨论】：