React TypeScript中循环渲染对象数组的实现方法（附Angular示例）

首先，咱们得先明确React和Angular在列表渲染上的核心差异：Angular用ng-repeat指令声明式渲染，而React需要通过**数组映射（map）**生成JSX元素数组，同时要注意给列表项添加唯一key属性（避免React渲染警告和性能问题）。

先给你的数据结构定义TypeScript类型，这是TS项目的最佳实践：

// 单个时间选项的类型
interface TimeOption {
  display: string;
  active: boolean;
  // 如果有其他属性，比如value，可以在这里补充
}

// 时间选项分组的类型：键为分组名，值为该组的选项数组
interface TimeOptions {
  [groupKey: string]: TimeOption[];
}

接下来，咱们把你未完成的代码改写成符合React规范的实现——这里分类组件和函数组件两种常见场景：

类组件实现 #

你的原代码用了类组件的写法，问题在于for循环只是调用_renderGroup，但没有收集返回的JSX元素并最终返回。我们用Object.entries遍历对象的键值对，再通过嵌套map生成列表：

import React from 'react';

class TimeSelector extends React.Component<{}, { timeOptions?: TimeOptions }> {
  // 示例状态数据，你可以根据实际情况从props或其他地方获取
  state = {
    timeOptions: {
      recent: [{ display: '1小时', active: false }, { display: '2小时', active: true }],
      history: [{ display: '1天', active: false }, { display: '7天', active: false }]
    }
  };

  renderRelative() {
    const { timeOptions } = this.state;
    if (!timeOptions) return null;

    // 遍历每个分组，生成对应的ul和li
    return (
      <div>
        {Object.entries(timeOptions).map(([groupKey, group]) => (
          <ul key={groupKey}>
            {group.map((option, index) => (
              <li
                // 用分组键+索引生成唯一key，如果option有自身唯一ID的话用ID更好
                key={`${groupKey}-${index}`}
                // 对应Angular的ng-class，判断active类是否添加
                className={option.active ? 'active' : ''}
              >
                <a>{option.display}</a>
              </li>
            ))}
          </ul>
        ))}
      </div>
    );
  }

  render() {
    return <div className="time-selector">{this.renderRelative()}</div>;
  }
}

export default TimeSelector;

函数组件实现（更推荐现代React写法） #

如果是用函数组件+hooks，代码会更简洁：

import React from 'react';

// 组件props类型
interface TimeSelectorProps {
  timeOptions?: TimeOptions;
}

const TimeSelector: React.FC<TimeSelectorProps> = ({ timeOptions }) => {
  if (!timeOptions) return null;

  return (
    <div className="time-selector">
      {Object.entries(timeOptions).map(([groupKey, group]) => (
        <ul key={groupKey}>
          {group.map((option, idx) => (
            <li
              key={`${groupKey}-${idx}`}
              className={option.active ? 'active' : ''}
            >
              <a>{option.display}</a>
            </li>
          ))}
        </ul>
      ))}
    </div>
  );
};

export default TimeSelector;

和原Angular代码的对应关系： #

• ng-repeat="group in ctrl.timeOptions" → Object.entries(timeOptions).map(...)（因为timeOptions是对象，用Object.entries获取键值对）
• ng-repeat='option in group' → group.map(...)
• ng-class="{active: option.active}" → className={option.active ? 'active' : ''}（如果需要多个类，可以用模板字符串拼接）
• bo-text="option.display" → 直接在<a>标签中插入{option.display}

原代码的问题点： #

你之前的for循环只是调用_renderGroup，但没有把返回的JSX元素收集起来。React组件的渲染方法必须返回JSX元素（或元素数组），而for循环本身不会返回这些元素，所以最终renderRelative返回null，看不到任何内容。用map可以直接生成JSX元素数组并返回，这是React列表渲染的标准方式。

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