ReactJs 中的 if 语句

Question

我编写了一个 if 语句，它旨在根据两个布尔变量（活动和确认）返回某种颜色。然而，由于具有 Java 背景并且对 ReactJs 和 JSX 不熟悉，我发现这项任务比我觉得需要的要困难得多。 这个 if 语句只返回橙色。我无法理解 && 运算符的工作原理。

目标：如果激活和确认都为真，我想将图标设置为橙色。如果活动为真但确认为假，我想将图标设置为红色。如果活动为假但确认为真，我想将图标设置为绿色。如果活动和确认都为假，则图标将为灰色。

这是我的代码：

//Mapping Json-object 
const active = data.Status.map(status => status.active);
const acknowledged = data.Status.map(status => status.acknowledged);

//Method called from component 
function bellStatus() {
    if(active && acknowledged) {
        return {color: "#ff893d", marginRight: "10px"} //orange
    }else if(active && !acknowledged) {       
        return {color: "#fe4242", marginRight: "10px"} //red
    }else if(!active && acknowledged) {
        return {color: "#5ab65a", marginRight: "10px"} //green
    }else {
        return {color: "#acacac", marginRight: "10px"} //grey
    }
}

//Component in return
<FontAwesomeIcon icon="bell" style={bellStatus()} />

//Json
{
  "id": "1",
  "Status": [{
      "active": true,
      "acknowledged": false
   }]
},
{
  "id": "2",
  "Status": [{
      "active": false,
      "acknowledged": false
  }]
},
{
  "id": "3",
  "Status": [{
      "active": true,
      "acknowledged": false
  }]
}

为什么我会遇到这个问题，这将如何“翻译”成 JSX/ES6？变量显示正确的值，但 if 语句显然是错误的。

Answer 1

问题是 Map 返回一个数组，因此您的活动和确认都是数组，因此检查 active && acknowledge 始终为真，因为它们是数组并且存在，这就是为什么您只得到第一种情况的结果。您可以通过记录活动的值以及确认来验证这一点。因此，您与ifs 的比较基本上没有错，而是您用来比较的内容。你可以在这里阅读更多关于地图的信息map