react select change singleValue颜色基于选项

Question

我想根据提供的选项修改styles对象中的"选定"singleValue颜色。

const statusOptions = [
{ value: "NEW", label: i18n._(t`NEW`) },
{ value: "DNC", label: i18n._(t`DNC`) },
{ value: "WON", label: i18n._(t`WON`) },
{ value: "LOST", label: i18n._(t`LOST`) },
];

例如，如果在"；NEW"；，我希望字体颜色是红色，如果它是"WON"；，然后是绿色，依此类推。我在将if语句放入styles对象时遇到问题。我看到把一个三元语句放进去很简单，但如何添加更多的"复数"；思维方式

const customStyles = {
...
singleValue: (provided) => ({  
...provided,
color: 'red' <----- something like if('NEW') { color: 'green' } etc..
})
}; 

Answer 1

使用样式映射对象：

import React from 'react';
import Select from 'react-select';
const statusOptions = [
{ value: 'NEW', label: 'NEW' },
{ value: 'DNC', label: 'DNC' },
{ value: 'WON', label: 'WON' },
{ value: 'LOST', label: 'LOST' },
];
const styleMap = {
NEW: 'red',
DNC: 'blue',
};
const colourStyles = {
singleValue: (provided, { data }) => ({
...provided,
color: styleMap[data.value] ? styleMap[data.value] : 'defaultColor',
// specify a fallback color here for those values not accounted for in the styleMap
}),
};
export default function SelectColorThing() {
return (
<Select
options={statusOptions}
styles={colourStyles}
/>
);
}