react typescript 循环对象

可以使用 TypeScript 的泛型来定义循环对象的类型，然后使用 `Object.entries()` 方法将对象转换为键值对数组，最后使用 `.map()` 方法遍历数组。

例如，假设有以下对象：

interface Person {
  name: string;
  age: number;
}

const people: Record<string, Person> = {
  john: { name: 'John', age: 30 },
  jane: { name: 'Jane', age: 25 },
  bob: { name: 'Bob', age: 40 },
};

可以通过以下方式循环对象：

Object.entries(people).map(([key, value]) => (
  <div key={key}>
    <span>{value.name}</span>
    <span>{value.age}</span>
  </div>
));

在这个例子中，`Object.entries(people)` 返回一个键值对数组，其中每个元素包含对象的键和值。然后使用 `.map()` 方法遍历数组，将每个元素渲染为一个 `<div>` 元素。`key` 属性设置为对象的键，以确保 React 可以正确地跟踪每个元素。在 `<div>` 元素中，渲染对象的 `name` 和 `age` 属性。