Question

我正在使用CSS modules in a React project。我希望能够在我返回的第一个div中使用className={this.state.boxClassName}，而不是对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;

Answer 1

您可以将boxClassName设置为您要从classes对象访问的密钥。

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

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

Answer 2

似乎唯一的问题是您将this.state.boxClassName设置为专门用于字符串'classes.trigger'，而不是classes.trigger的值。

尝试将您的代码修改为如下形式：

import React, { Component } from 'react';

import classes from './Box.css';

class Box extends Component {

    state = {
        boxClassName: classes.trigger,
    }

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

export default Box;

Answer 3

将boxClassName设置为'classes.trigger'时，会将其设置为该字符串文字，这就是为什么它在CSS中如此显示的原因。我对React-css-moduels并不完全熟悉，但是您应该可以设置boxClassName = classes.trigger（不带引号）

使用模块化CSS在React中使用状态字符串作为className

3 个答案: