React动态CSS类问题：CSS Modules下随机颜色类返回undefined

嘿，我来帮你搞定这个问题！你的代码里有两个关键问题导致了当前的状况，咱们一个个来解决：

1. CSS Modules动态类名访问错误 #

你写的${styles.colorClass}是无效的，因为styles是CSS Modules生成的对象，colorClass是你定义的变量（存的是'red'、'blue'这类字符串）。要访问对象中对应变量值的属性，得用方括号语法，也就是styles[colorClass]，而不是点语法（点语法只能用固定的键名，比如styles.red）。

2. 全局颜色数组被意外修改 #

你把colors数组放在组件外面，每次组件render时都会过滤掉已经选过的颜色，这会导致全局的colors数组越来越小，最后变成空数组，后续渲染就再也取不到颜色了。而且类组件的render可能会因为父组件更新等原因触发多次，这种写法很容易出问题。

修复后的单组件随机颜色代码 #

如果只是单个组件每次渲染随机切换颜色，不需要避免重复的话，代码可以改成这样：

import React, { Component } from 'react';
import styles from './UsersBoxItem.module.scss';

class UsersBoxItem extends Component {
  // 把颜色数组放在组件内部，避免全局污染
  colors = ['red', 'blue', 'green', 'pink', 'orange'];

  render() {
    // 从内部数组里随机选一个颜色
    const randomIdx = Math.floor(Math.random() * this.colors.length);
    const colorClass = this.colors[randomIdx];

    return (
      <div className={`${styles.box} ${styles[colorClass]}`}>
        {/* 这里放你的组件内容 */}
      </div>
    );
  }
}

export default UsersBoxItem;

补充：多个组件实例实现不重复颜色 #

如果是要渲染多个UsersBoxItem，且每个实例颜色不重复，那最好在父组件里管理颜色池，通过props把颜色传给子组件：

父组件代码 #

import React, { Component } from 'react';
import UsersBoxItem from './UsersBoxItem';

class UsersBox extends Component {
  state = {
    availableColors: ['red', 'blue', 'green', 'pink', 'orange']
  };

  pickUniqueColor = () => {
    const { availableColors } = this.state;
    if (availableColors.length === 0) return 'default'; // 兜底颜色

    const randomIdx = Math.floor(Math.random() * availableColors.length);
    const chosenColor = availableColors[randomIdx];

    // 更新状态，移除已选的颜色
    this.setState(prev => ({
      availableColors: prev.availableColors.filter(c => c !== chosenColor)
    }));

    return chosenColor;
  };

  render() {
    // 示例渲染5个组件
    return (
      <div className="users-box">
        {[1,2,3,4,5].map((_, idx) => (
          <UsersBoxItem key={idx} color={this.pickUniqueColor()} />
        ))}
      </div>
    );
  }
}

export default UsersBox;

子组件修改 #

import React, { Component } from 'react';
import styles from './UsersBoxItem.module.scss';

class UsersBoxItem extends Component {
  render() {
    const { color } = this.props;
    return (
      <div className={`${styles.box} ${styles[color]}`}>
        {/* 组件内容 */}
      </div>
    );
  }
}

export default UsersBoxItem;

这样就能保证每个子组件拿到唯一的颜色，同时正确使用CSS Modules的动态类名啦。

内容的提问来源于stack exchange，提问作者Enzo