时间戳

首页 > 解决方案 > 使用模块化 CSS 将状态字符串作为类名与 React 一起使用

javascript - 使用模块化 CSS 将状态字符串作为类名与 React 一起使用

问题描述

我在 React 项目中使用 CSS 模块。我希望能够className={this.state.boxClassName}在我的第一个返回的 div 中使用，而不是硬编码className={classes.trigger}，正如您在下面看到的那样。

但是，当我这样做时，在检查 chrome 中的页面时，div（它只是一个 css 样式的正方形）没有收到对 css 文件的正确引用。

使用该this.state版本时，我看到<div class="classes.trigger">并没有正方形，而当我对其进行硬编码时，我正确地看到<div class="Box__trigger__9jAXL">了（这种带有散列结尾的格式来自 React 中的 css 模块的配置方式）并且正确渲染了正方形。

那么，如果使用 css 模块，我该如何解决这个问题，以便能够引用 className 的状态？我是新手，这是我在这里的第一个问题，所以感谢您对我的支持，非常感谢任何帮助。

import React, { Component } from 'react';
import classes from './Box.css';

class Box extends Component {
    state = {
        boxClassName: 'classes.trigger',
    }

    render() {
        return(
            <div className={classes.trigger}>
                <div className={classes.box} />
            </div> 
        );
    }
}

export default Box;

标签： javascripthtmlcssreactjs

解决方案

您可以设置boxClassName为只是要从classes对象访问的键。

class Box extends Component {
    state = {
        boxClassName: 'trigger',
    }

    render() {
        return(
            <div className={classes[this.state.boxClassName]}>
                <div className={classes.box} />
            </div> 
        );
    }
}

推荐阅读