一段时间以来,我一直在努力,我试图根据从下拉菜单组件中选择的值来更改文本的颜色
const DropdownSelectPriority = props => {
const { multiChoiceArray } = props
return (
<ButtonContainer>
{multiChoiceArray.map(questionChoice => {
return (
<Item key={questionChoice.id}>
<p>{questionChoice.text}</p>
<SimpleSelect
placeholder="Select a priority"
onValueChange={value => console.log(value)}
>
{questionChoice.options.map(options => {
return <option value={options.label}>{options.value}</option>
})}
</SimpleSelect>
</Item>
)
})}
</ButtonContainer>
)
}
const Item = styled.div`
.react-selectize {
color: ${props => {
const value = props.options && props.options.value
if (value === 'My highest priority') {
return 'green'
}
return 'blue'
}};
}
`
选项数组
options: [
{
id: 1,
label: 'Greenhouse gas reduction',
value: 'Not a priority for me',
priority: '',
},
{
id: 2,
label: 'Greenhouse gas reduction',
value: 'Somewhere in the middle',
priority: '',
},
{
id: 3,
label: 'Greenhouse gas reduction',
value: 'My highest priority',
priority: '',
},
],
现在,它会将所有值呈现为蓝色,这表示未满足我的特定条件...我在哪里出错? {options.value}
是我尝试应用样式的地方