如何在TypeScript中实现Antd Timeline元素按阶段名称分组展示

存在的问题 #

• groupBy 函数的 reduce 初始值错误：你使用数组[]作为初始累加值，但以字符串类型的StageName作为键名，应该使用普通对象{}作为初始值，否则键值对存储会出现异常。
• JSX 渲染逻辑错误：forEach 方法没有返回值，不会生成可渲染的元素，必须替换为map方法才能返回组件数组完成渲染。
• 自定义样式组件命名不规范：styled-components 创建的自定义组件必须首字母大写，否则 React 会将其识别为原生 HTML 标签，样式无法生效。

修复后的完整代码 #

import styled from 'styled-components';
import { Timeline } from 'antd';
const { Item: TimelineItem } = Timeline;

// 自定义组件首字母大写
const StageDiv = styled.div`
  font-size: 1rem;
  font-weight: 500;
`;

const StepDiv = styled.div`
  font-size: 1rem;
  font-weight: 300;
  margin: 8px 0; // 可选：增加步骤之间的间距
`;

// 修复groupBy函数，初始值改为对象
function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    const key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {}); // 初始值为对象
}

function StageTimeline({ stages }: any) {
  const groupedStages = groupBy(stages, 'StageName');

  return (
    <Timeline>
      {/* 替换forEach为map */}
      {Object.entries(groupedStages).map(([stageName, stageSteps]) => (
        <TimelineItem key={stageName}>
          <StageDiv>{stageName}</StageDiv>
          {stageSteps.map((stageStep: any, index: number) => (
            <StepDiv key={index}>{stageStep.Step}</StepDiv>
          ))}
        </TimelineItem>
      ))}
    </Timeline>
  );
}

补充说明 #

如果需要保留每个步骤的状态展示，可直接在StepDiv中读取stageStep.Status字段，结合antd Timeline的color属性或者自定义样式实现不同状态的视觉区分。

内容的提问来源于stack exchange，提问作者Saumesh