Javascript 根据react-table-6中另一列的结果对单元格进行着色

当前我显示的表格中，

受保护的

列中的单元格高亮显示为绿色（如果为真），红色（如果为假）：

Name |     Source     | Protected
________________________________
Ryan      Computer       False
Briana Phone, Computer   True
Shawn      Phone         True
Serge      Phone         False

我对应的代码如下所示：

const列=[
{
标题：“姓名”，
访问者：“名称”，
风格：{
textAlign：“居中”，
},
},
{
标题：“来源”，
访问者：“源”，
风格：{
textAlign：“居中”，
},
},
{
标题：“受保护”，
id:“受保护”，
访问器：（d）=>d.protected.toString（），
getProps：（状态，行信息）=>{
if（rowInfo&&rowInfo.row）{
返回{
风格：{
textAlign：“居中”，
背景：rowInfo.row.protected==“false”？“红色”：“绿色”，
},
};
}否则{
返回{}；
}
},
},
];

是否可以根据相应的

Protected

属性是真还是假，删除

Protected

列并用红色或绿色突出显示

Source

列？ i、 e

我的数据如下所示：

[
{
“姓名”：“Ryan”，
“受保护”：错误，
“来源”：[“计算机”]，
},
{
“姓名”：“Briana”，
“受保护”：正确，
“来源”：[“电话、计算机”]，
},
{
“姓名”：“肖恩”，
“受保护”：正确，
“来源”：[“电话”]，
},
{
“姓名”：“哔叽”，
“受保护”：错误，
“来源”：[“电话”]，
}
]

是的，这是可能的

为此，在创建列时，可以使用

单元格

道具影响列的样式，并在数据内容周围添加一个

像这样：

列=[
{
标题：“来源”，
访问者：“源”，
风格：{
textAlign：“居中”，
},
单元格：（行）=>{
返回(
{row.original.Source}
);
},
});
];

Name |     Source (highlighted color)   
_____________________________________
Ryan       Computer  (red)     
Briana     Phone, Computer (green)  
Shawn      Phone (green)      
Serge      Phone (red)