如何在react中遍历列表并创建元素时创建引导器行

import React from 'react';

function GuideList(props) {
  const guides = props.guides;

  // 使用map()函数遍历列表并创建引导器行
  const guideRows = guides.map((guide, index) =>
    <GuideRow key={index} guide={guide} />
  );

  return (
    <div>
      {guideRows}
    </div>
  );
}

function GuideRow(props) {
  const guide = props.guide;

  return (
    <div>
      <span>{guide.title}</span>
      <span>{guide.description}</span>
    </div>
  );
}

// 使用示例
const guides = [
  { title: 'Guide 1', description: 'This is guide 1' },
  { title: 'Guide 2', description: 'This is guide 2' },
  { title: 'Guide 3', description: 'This is guide 3' }
];

function App() {
  return (
    <div>
      <h1>Guides</h1>
      <GuideList guides={guides} />
    </div>
  );
}

export default App;