循环遍历React TypeScript中的整个分区

const data: string[] = ['item1', 'item2', 'item3'];

render() {
  const items = data.map((item, index) => {
    return <div key={index}>{item}</div>;
  });

  return <div>{items}</div>;
}

const data: { title: string, items: string[] }[] = [
  { title: 'Section 1', items: ['item1', 'item2'] },
  { title: 'Section 2', items: ['item3', 'item4'] },
];

const renderSection = (section: { title: string, items: string[] }, index: number) => {
  const items = section.items.map((item, itemIndex) => {
    return <div key={itemIndex}>{item}</div>;
  });

  return (
    <div key={index}>
      <h2>{section.title}</h2>
      {items}
    </div>
  );
};

render() {
  const sections = data.map(renderSection);

  return <div>{sections}</div>;
}