根据键设置对象的颜色到"map" REACT/Materialui 上的单选按钮

Question

所以我被困住了 我有两个对象：

options = {'Not Ok':'Not Ok', 'Watch':'Watch', 'Ok':'Ok'};
choice_colors = {'Ok':'green', 'Not Ok':'red', 'Watch':'yellow'};

我正在使用地图函数生成参考材料 UI 的单选按钮

let choices = _map(options, function(choice, key){  
return  <FormControlLabel key={key}
id={key}
value={key+''}
control={<Radio />}
label="" 
/>;

我从control={<Radio />}获得所需的输出 3 个单选按钮

但是现在我想根据它们的关键值为每个设置颜色，例如： 第一个单选按钮有键"确定"，那么它的颜色应该是"绿色"参考

choice_colors = {'Ok':'green', 'Not Ok':"red", 'Watch':'yellow'};

我试过了

control={<Radio style={{color:'red'}} />}   

以上将红色传递给所有三个无线电

control={<Radio style={{color:`${key==="Ok" ? red : ' '}`}} />}  

上面没有给出所需的输出原因，我无法添加多个检查

提前感谢！！

Answer 1

可以在 Radio 样式属性中使用 choice_colors 字典，如下所示：

const options = {'Not Ok':'Not Ok', 'Watch':'Watch', 'Ok':'Ok'};
const choice_colors = {'Ok':'green', 'Not Ok':'red', 'Watch':'yellow'};
let choices = _map(options, function(choice, key) {  
return (
<FormControlLabel key={key}
id={key}
value={key+''}
control={<Radio style={{ color: choice_colors[key] }} />}
label="" 
/>
);
});