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}以上数据用react函数组件写一个tab切换

好的，以下是一个简单的实现：

import React, { useState } from "react";

const data = [
  { name: "CC", totalWorkstation: 100, correctWorkstation: 30, seriousWorkstation: 10, normalWorkstation: 20 },
  { name: "CK", totalWorkstation: 100, correctWorkstation: 30, seriousWorkstation: 10, normalWorkstation: 20 },
  { name: "SB", totalWorkstation: 100, correctWorkstation: 30, seriousWorkstation: 10, normalWorkstation: 20 },
  { name: "SS", totalWorkstation: 100, correctWorkstation: 30, seriousWorkstation: 18, normalWorkstation: 20 },
  { name: "SV", totalWorkstation: 100, correctWorkstation: 30, seriousWorkstation: 10, normalWorkstation: 20 }
];

function Tab({ data }) {
  const [activeIndex, setActiveIndex] = useState(0);

  return (
    <div>
      <div className="tab-menu">
        {data.map((item, index) => (
          <button
            key={index}
            className={index === activeIndex ? "active" : ""}
            onClick={() => setActiveIndex(index)}
          >
            {item.name}
          </button>
        ))}
      </div>
      <div className="tab-content">
        <p>Total Workstation: {data[activeIndex].totalWorkstation}</p>
        <p>Correct Workstation: {data[activeIndex].correctWorkstation}</p>
        <p>Serious Workstation: {data[activeIndex].seriousWorkstation}</p>
        <p>Normal Workstation: {data[activeIndex].normalWorkstation}</p>
      </div>
    </div>
  );
}

export default function App() {
  return <Tab data={data} />;
}

这里使用了 `useState` 来保存当前激活的 tab，然后根据当前激活的索引来显示相应的内容。每个 tab 都是一个 button，点击时会切换激活的 tab。