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

Question

所以我坚持这个我有两个对象:

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

我正在使用 map 函数生成单选按钮并引用 Material UI

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

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

但现在我想根据它们的键值为它们每个设置颜色，例如: 第一个单选按钮有键 'ok 然后它的颜色应该是“绿色”引用来自

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

我试过了

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

将红色传递给所有三个 radio

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

上面没有给出所需的输出，因为我无法添加多个支票

提前致谢!!

Answer 1

您可以像这样在单选样式属性中使用 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="" 
   />
 );
});