css - 在 react 中的模块化CSS中设置具有状态值的ClassName

Question

我在 React 中使用模块化 CSS。我必须将 addClass 添加到 <h2>我该怎么做 问题是我正在使用模块化 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;

Answer 1

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

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