时间戳

首页 > 解决方案 > 根据对象数组中的条目将css类添加到循环生成的元素中

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

问题描述

我有几个用于环境 ( envList) 和团队 ( teamsList) 的对象，如下所示：

const envList = {
    dev: "DEV",
    sit: "SIT",
    uat: "UAT",
    qa: "QA",
    prod: "PROD"
  };

  const teamsList = {
    a: "Team A",
    b: "Team B",
    c: "Team C",
    d: "Team D"
  };

我正在循环它们以显示它们（有点）像一张桌子：

<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>

注意：上面是 JSX，但它并不是真正的 React 问题。只是在团队和环境上嵌套地图。

生成输出，例如

Team A DEV SIT UAT QA PROD
Team B DEV SIT UAT QA PROD
Team C DEV SIT UAT QA PROD
Team D DEV SIT UAT QA PROD

我需要添加一个 CSS 类 ( .red) 以突出显示基于以下redTeams数组的任何团队的环境：

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"
    }
];

如果 ateam和 anenvIndex存在于 中redTeams，我想在该环境的跨度上添加一个类。redTeams 中的一个团队可能有多个条目。

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)

上面的输出是为了表示，没有（红色），而是添加了一个类span

这是一个沙箱https://codesandbox.io/s/pwjxy82j5x?fontsize=14

有关该方法的一些建议会有所帮助和赞赏

标签： javascriptreactjsloopsecmascript-6

解决方案

您需要在渲染时有条件地添加 className。在此之前，您需要为 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>

工作演示

推荐阅读