如何使用react-swipe在一张幻灯片中渲染多个项目？

import React from 'react';
import Swipe from 'react-swipe';

const Slider = () => {
  // 定义幻灯片项目的数据
  const projects = [
    { title: '项目1', image: 'url-to-project-1' },
    { title: '项目2', image: 'url-to-project-2' },
    { title: '项目3', image: 'url-to-project-3' },
  ];

  // 使用map方法将每个项目渲染为幻灯片项
  const slideItems = projects.map((project, index) => (
    <div key={index}>
      <h2>{project.title}</h2>
      <img src={project.image} alt={project.title} />
    </div>
  ));

  // 返回Swipe组件并将幻灯片项传递给它进行渲染
  return <Swipe>{slideItems}</Swipe>;
};

export default Slider;

import React from 'react';
import Slider from './Slider';

const App = () => {
  return (
    <div>
      <h1>多项目幻灯片</h1>
      <Slider />
    </div>
  );
};

export default App;