无法在反应中将道具传递给字典

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 的颜色会发生变化，但是当我尝试通过给定字符串 'pink' 字典的 { color } 属性时没有 return 要求的颜色。

<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

希望对您有所帮助！

无法在反应中将道具传递给字典

Unable to pass prop into dict in react

dictionary

reactjs

gatsby

react-props