条件渲染样式的组件

时间:2019-12-31 00:27:13

标签: css reactjs oop ecmascript-6 styled-components

一段时间以来,我一直在努力,我试图根据从下拉菜单组件中选择的值来更改文本的颜色

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}是我尝试应用样式的地方

0 个答案:

没有答案