React.js如何以模块化方式使用动态样式及module.css报错问题

module.css动态样式用法 #

• 先导入样式模块：import styles from './你的组件名.module.css'
• 静态类名直接使用：className={styles.你的类名}
• 动态类名拼接：需要根据变量切换类名时，使用模板字符串拼接，比如className={${styles.base} ${isDark ? styles.dark : styles.light}}
• 变量类名调用：如果类名由遍历得到的字段拼接生成，使用方括号访问styles对象，比如className={styles[type-${item.type}]}，注意要保证module.css中存在对应名称的类，避免获取到undefined

map遍历对象数组常见报错排查 #

你遇到的报错为调用map方法的目标值为undefined的类型错误，可从以下方向排查：

• 初始化默认值：使用useState声明要遍历的数组时，默认值设置为空数组useState([])，不要留空或者设置为null
• 数据结构校验：如果数组从接口请求获取，确认返回的字段对应的值为数组类型，不要把对象、字符串等其他类型赋值给遍历变量
• 增加兜底逻辑：遍历前加可选链和空数组兜底，写法为(你的数组变量 ?? []).map(...)，即使变量为undefined也不会触发报错
• 遍历key值正确：map遍历的每一项必须设置唯一的key属性，一般直接用item.id即可，不要用索引作为key（数组存在增删操作时会引发渲染异常）

可运行示例代码 #

组件代码 #

import styles from './Demo.module.css'
import { useState, useEffect } from 'react'

function Demo() {
  // 注意初始化默认值为空数组
  const [goodsList, setGoodsList] = useState([])

  useEffect(() => {
    // 模拟接口请求返回数据
    const res = [
      { id: 1, status: 'sale', name: '在售商品A' },
      { id: 2, status: 'off', name: '下架商品B' },
      { id: 3, status: 'pre', name: '预售商品C' }
    ]
    setGoodsList(res)
  }, [])

  return (
    <div className={styles.container}>
      {/* 加空数组兜底避免报错 */}
      {(goodsList ?? []).map(item => (
        <div 
          key={item.id}
          {/* 动态拼接对应状态的样式类 */}
          className={`${styles.goodsItem} ${styles[`status-${item.status}`]}`}
        >
          {item.name}
        </div>
      ))}
    </div>
  )
}

export default Demo

对应的Demo.module.css代码 #

.container {
  width: 600px;
  margin: 20px auto;
}
.goodsItem {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}
.status-sale {
  color: #52c41a;
}
.status-off {
  color: #8c8c8c;
}
.status-pre {
  color: #1890ff;
}

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