将这个数据使用react映射到下面的html中{CC:{totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:10,normalWorkstaion:20} CK: {totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:10,normalWorkstaion:20} SB: {totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:10,normalWorkstaion:20} SS:{totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:18,normalWorkstaion:20} SV:{totalWorkstaion:100,correctWorkstaion:30,seriousWorkstaion:10,normalWorkstaion:20}} <div className="flex topselect” flist.map((item: string, index:number)=>return titleBox(item, index); 202 /div> div className="box air-con"> <div className="flex software" <div className="flex hardware-number"<div className="number-total"> <TextNumber number={selectedData?.totalworkstaion desc="受控软件总数”/> </div>TextNumber nColor="#0AFFF number=fselectedData?.correcthorkstaion desc="开启”/>ta?.serioushorkstaion ) desc="告警"<TextNumber nColor="#EE3232number=selec时间<TextNumber nColor="#FFFFFFLeuvata?.normalworkstaion ] desc="吴常"number=!selec<TextNumber nColor="rgb255, 255, 255 , 0.4)"number=fselectedData?.closedworkstaion0</div> </div> <div className="software-list flex"> [softList.map((item, index: number) => return <SoftwareItem key=findex! data=fitem) />;

好的，可以尝试以下代码来实现这个映射：

import React from "react";

const data = {
  CC: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 10, normalWorkstaion: 20},
  CK: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 10, normalWorkstaion: 20},
  SB: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 10, normalWorkstaion: 20},
  SS: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 18, normalWorkstaion: 20},
  SV: {totalWorkstaion: 100, correctWorkstaion: 30, seriousWorkstaion: 10, normalWorkstaion: 20},
};

const TopSelect = () => {
  const flist = Object.keys(data);
  const titleBox = (item, index) => <div key={index}>{item}</div>;

  return <div className="flex topselect">{flist.map((item, index) => titleBox(item, index))}</div>;
};

const TextNumber = ({number, desc, nColor}) => (
  <div className="number">
    <div className="number-value" style={{color: nColor}}>
      {number}
    </div>
    <div className="number-desc">{desc}</div>
  </div>
);

const SoftwareItem = ({key, data}) => (
  <div key={key} className="software-item">
    <div className="software-name">{key}</div>
    <div className="flex hardware-number">
      <div className="number-total">
        <TextNumber number={data.totalWorkstaion} desc="受控软件总数" />
      </div>
      <div className="number-correct">
        <TextNumber number={data.correctWorkstaion} desc="开启" nColor="#0AFFF" />
      </div>
      <div className="number-serious">
        <TextNumber number={data.seriousWorkstaion} desc="告警" nColor="#EE3232" />
      </div>
      <div className="number-normal">
        <TextNumber number={data.normalWorkstaion} desc="无常" nColor="rgb(255, 255, 255, 0.4)" />
      </div>
    </div>
  </div>
);

const App = () => {
  const softList = Object.entries(data);

  return (
    <div className="box air-con">
      <div className="flex software-list">{softList.map(([key, data]) => <SoftwareItem key={key} data={data} />)}</div>
    </div>
  );
};

export default function MyComponent() {
  return (
    <div>
      <TopSelect />
      <App />
    </div>
  );
}

这里定义了 `TopSelect` 组件用于渲染上面的 `flex topselect`，`App` 组件用于渲染下面的 `box air-con` 和 `flex software-list`，还有一个 `SoftwareItem` 组件用于渲染每个软件的详细信息。在 `App` 组件中，我们使用 `Object.entries` 将 `data` 对象转换为一个二元数组，方便遍历。在 `SoftwareItem` 中，我们使用了 `TextNumber` 组件来展示数字和描述信息。