Javascript 将css类添加到循环根据对象数组中的条目生成的元素中

我有两个用于环境（

envList

）和团队（

teamsList

）的对象，如下所示：

我在他们身上绕了一圈，让他们看起来像一张桌子：

<div className="App">
      {Object.keys(teamsList).map((key, i) => (
        <div className="team" key={i}>
          <span className="teamname">{teamsList[key]}</span>
          {Object.keys(envList).map((key, i) => (
            <span className="env-th-cell" key={key}>
              {envList[key]}
            </span>
          ))}
        </div>
      ))}
</div> 

我需要添加一个CSS类（

.red

）来突出显示基于以下

redTeams

数组的任何团队的env：

const redTeams = [
    {
      envIndex: 0,
      team: "Team A"
    },
    {
      envIndex: 0,
      team: "Team B"
    },
    {
      envIndex: 4,
      team: "Team B"
    }
    {
      envIndex: 3,
      team: "Team C"
    },
    {
      envIndex: 4,
      team: "Team C"
    }
]; 

如果

redTeams

中存在

team

和

envIndex

，我想在span上为该环境添加一个类。在redTeams中，一个团队可能有多个条目

上面的输出用于表示，没有（红色），但在

span

这是一个沙箱

---

关于该方法的一些建议将很有帮助，并且非常感谢

您需要在呈现时有条件地添加类名。在此之前，您需要为envIndex到env映射创建一个映射

<div className="App">
  {Object.keys(teamsList).map((key, i) => {
    const teams = redTeams.filter(team => teamsList[key] === team.team);
    return (
      <div className="team" key={i}>
        <span className="teamname">{teamsList[key]}</span>
        {Object.keys(envList).map((key, i) => {
          let className = "env-th-cell";
          if (
            teams &&
            teams.findIndex(
              t => envList[key] === indexToEnvMap[t.envIndex]
            ) > -1
          ) {
            className += " red";
          }
          return (
            <span className={className} key={key}>
              {envList[key]}
            </span>
          );
        })}
      </div>
    );
  })}
</div>

{Object.keys（teamsList）.map（（key，i）=>{
const teams=redTeams.filter（team=>teamsList[key]==team.team）；
返回(
{teamsList[key]}
{Object.keys（envList）.map（（key，i）=>{
让className=“环境第四单元”；
如果(
团队&&
团队。findIndex(
t=>envList[key]==indexToEnvMap[t.envIndex]
) > -1
) {
类名+=“红色”；
}
返回(
{envList[key]}
);
})}
);
})}

---

是的，这很有效。。。几乎！除非在

redTeams

数组中有两个特定团队的条目。例如，

Team B

为

envIndex

0和4都有条目，例如``const redTeams=[{{envIndex:0，Team:“Team A”}，{envIndex:0，Team:“Team B”}，{envIndex:4，Team:“Team B”}，{envIndex:3，Team:“Team C”}，{envIndex:4，team:“team D”}]；``这不会将类添加到team的env 4（PROD）中B@Smarajit使用

过滤器更新我的答案，而不是使用find。没有收到您的问题，请查看演示链接。
const redTeams = [
    {
      envIndex: 0,
      team: "Team A"
    },
    {
      envIndex: 0,
      team: "Team B"
    },
    {
      envIndex: 4,
      team: "Team B"
    }
    {
      envIndex: 3,
      team: "Team C"
    },
    {
      envIndex: 4,
      team: "Team C"
    }
]; 

Team A DEV(red) SIT UAT QA      PROD
Team B DEV(red) SIT UAT QA      PROD (red)
Team C DEV      SIT UAT QA(red) PROD
Team D DEV      SIT UAT QA      PROD(red)

<div className="App">
  {Object.keys(teamsList).map((key, i) => {
    const teams = redTeams.filter(team => teamsList[key] === team.team);
    return (
      <div className="team" key={i}>
        <span className="teamname">{teamsList[key]}</span>
        {Object.keys(envList).map((key, i) => {
          let className = "env-th-cell";
          if (
            teams &&
            teams.findIndex(
              t => envList[key] === indexToEnvMap[t.envIndex]
            ) > -1
          ) {
            className += " red";
          }
          return (
            <span className={className} key={key}>
              {envList[key]}
            </span>
          );
        })}
      </div>
    );
  })}
</div>