React中使用map()动态渲染按钮时className样式不生效的解决方法

我太懂这种踩坑的感觉了！你遇到的问题其实是JS对象动态属性访问的语法错误——CSS Modules导出的classes是一个键值对对象，当你用变量作为属性名时，不能用点语法或者字符串拼接，得用方括号语法才行。

为什么原来的写法不生效？ #

你写的className={${classes}.${btn}}会把整个classes对象转成字符串（比如[object Object].FirstBtn），浏览器根本识别不了这种奇怪的类名，自然样式就失效了。而直接写classes.FirstBtn或者${classes.SecondBtn}是有效的，因为这是正确的点语法/模板字符串引用对象属性。

正确的写法 #

把动态类名的访问改成方括号语法就搞定了：

const RenderBtns = (btnList) => {
  return btnList.map((btn) => {
    return (
      <button 
        className={classes[btn]} 
        name={btn} 
        onClick={onClickHandler}
      >
        {btn}
      </button>
    );
  });
};

额外验证小技巧 #

如果不确定classes[btn]是否正确，可以在函数里加个日志：

console.log(classes[btn]);

正常情况下应该输出类似FirstBtn_xxxxxx的哈希类名（CSS Modules自动生成的），这就说明属性访问是对的。

扩展：多个动态类名的情况 #

如果之后需要同时绑定多个动态类名，可以用模板字符串拼接：

className={`${classes[btn]} ${classes.commonBtnStyle}`}

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