我正在嘗試通過使用 dict 來更改反應中 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
當我在 dict 中輸入 'pink' 時，div 的顏色會發生變化，但是當我嘗試通過給定字串 'pink' 的 { color } 道具時，dict 不會回傳請求的顏色。
<ZoneButton colour={'pink'}/>
如果這是一種糟糕的做事方式，有沒有更好的方法？
uj5u.com熱心網友回復：
動態嘗試物件屬性的語法略有不同：
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
希望這有幫助！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/318279.html
上一篇：資料源控制元件在使用VisualStudio2019的.NETWindows表單應用程式中不可用
下一篇：將主要游戲回圈轉化為功能