在react的模块化css中使用状态值设置类名

我在react中使用模块化css。我必须将类添加到

我该怎么做问题是我使用的是模块化css，我知道如何在普通css中实现。请帮助。 这是我的组件

import React, { Component } from 'react';
import style from '../css/MessageHeader.css';


class MessageHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name : "name"
        }
    }
    render(){
        return(

            <div className={style.container}>
                <div className={style.iconWrapper}>
                    <i className ="fas fa-angle-left"></i>
                </div>
                <div className={style.profileWrapper}>
                   <h2 className={this.state.name}>john appleseed </h2> //this is how I would in normal css 
                </div>
            </div>
        );
    }
}

export default MessageHeader;

import React，{Component}来自'React'；
从“../css/MessageHeader.css”导入样式；
类MessageHeader扩展组件{
建造师（道具）{
超级（道具）；
此.state={
姓名：“姓名”
}
}
render（）{
返回(
john Applesed//这是我在普通css中的做法
);
}
}
导出默认消息头；

这将帮助您以这种方式添加类名。变量是状态为classname的任何变量

    <h2 className={`${this.state.variable}`}></h2>

---

虽然您可以使用全局类，但我假设您也希望h2类的作用域是该组件。就像您的其他类一样，您需要引用

样式

导入-但是使用基于状态的动态键，如下所示：

<h2 className={style[this.state.name]}>john appleseed </h2>

---

请记住，如果您在状态中的名称包含空格，那么css类名将不起作用，因此您必须进行一些转换（例如，

this.state.name.replace（…）

以删除空格和/或标点。

是否应该添加{this.state.variable}？我没听清楚，让我解释一下，例如，我需要在执行一个条件后设置一个类名，类名是我在状态中声明的一个变量，因此我可以使用它来如上设置类名，如果您以后不想更改类名，只需像添加html标记一样添加classname=“classname”如果你能解释到底发生了什么，我的答案可能会更准确

.container {
  // some styles here
}

.johnAppleseed {
  color: yellow;
}

// You can also specify a name as a child of the container just like normal css,
// although it's not really necessary
.container .bobBobbert {
  color: red;
}