React开发中无法将prop传入字典获取对应颜色值如何解决

问题原因 #

代码的核心错误是字典取值时错误地将colour变量包装成了对象，导致无法匹配到字典内的字符串键：

• 你写的colourPrimaryDict[{ colour }]等价于先创建了一个{ colour: "pink" }的对象，再用这个对象作为键去字典取值
• JavaScript中所有非字符串类型的对象作为对象键时，都会被自动调用toString()方法转为[object Object]字符串，自然无法匹配到字典里的pink键，所以最终取到的值是undefined

解决方案 #

最简修复 #

直接删除取值语句里多余的大括号即可，修改后的组件返回部分代码：

return (
    <div className={container} style={{
        backgroundColor: colourPrimaryDict[colour],
        color: colourSecondaryDict[colour]
    }}>
        { colour }
    </div>
)

更优实现方案 #

可以将两个独立的颜色字典合并为一个嵌套结构，减少重复维护成本，同时增加边界兼容逻辑，避免传入未定义的颜色值时样式异常：

import * as React from 'react'
import { container } from './zoneButton.module.css'

// 统一维护颜色映射，后续新增色值直接扩展该对象即可
const colourMap = {
  pink: {
    primary: 'var(--pastel-pink-primary)',
    secondary: 'var(--pastel-pink-secondary)'
  },
  blue: {
    primary: 'var(--pastel-blue-primary)',
    secondary: 'var(--pastel-blue-secondary)'
  }
}

const ZoneButton = ({ colour }) => {
  // 匹配不到对应色值时默认使用pink配置，可根据业务需求调整默认值
  const currentColour = colourMap[colour] ?? colourMap.pink
  return (
    <div 
      className={container} 
      style={{
        backgroundColor: currentColour.primary,
        color: currentColour.secondary
      }}
    >
      { colour }
    </div>
  )
}

export default ZoneButton

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