无法在反应中将prop传递给dict

Question

我正在尝试通过使用字典来改变div的颜色。

import * as React from 'react'
import {
container
} from './zoneButton.module.css'
const ZoneButton = ({ colour }) => {
const colourPrimaryDict = {
'pink': 'var(--pastel-pink-primary)'
}
const colourSecondaryDict = {
'pink': 'var(--pastel-pink-secondary)'
}
return (
<div className={container} style={{
backgroundColor: colourPrimaryDict[{ colour }],
color: colourSecondaryDict[{ colour }]
}}>
{ colour }
</div>
)
}
export default ZoneButton

当我在字典中输入'pink'时，div的颜色发生了变化，但是当我尝试通过{color} prop传递给字符串'pink'时，字典不会返回所请求的颜色。

<ZoneButton colour={'pink'}/>

如果这是一种糟糕的做事方式，还有更好的方法吗?

Answer 1

动态尝试对象属性的语法有点错误:

import * as React from 'react'
import {
container
} from './zoneButton.module.css'
const ZoneButton = ({ colour }) => {
const colourPrimaryDict = {
'pink': 'var(--pastel-pink-primary)'
}
const colourSecondaryDict = {
'pink': 'var(--pastel-pink-secondary)'
}
return (
<div className={container} style={{
backgroundColor: colourPrimaryDict[colour],
color: colourSecondaryDict[colour]
}}>
{ colour }
</div>
)
}
export default ZoneButton

希望这对你有帮助!