react tsx, 让列表在父元素中无限轮播，父元素中每次只展示列表中的一个子项

React TypeScript (tsx) 中实现一个无限轮播效果通常涉及以下几个步骤：

1. **状态管理**：
创建一个状态来表示当前显示的子项索引。这可以是一个名为 `currentSlide` 的变量，并使用 React Hooks 如 `useState` 来初始化和更新它。

import { useState } from 'react';

const [currentSlide, setCurrentSlide] = useState(0);

2. **数据结构**：
假设你有一个数组 `items` 包含所有列表项。你可以使用 TypeScript 的泛型来创建一个通用的组件，接受任何类型的子组件作为内容。

interface ListItem<T> {
  id: number;
  content: T;
}

type CarouselProps<T> = {
  items: ListItem<T>[];
};

3. **轮播组件**：
使用 `map` 函数遍历 `items`，并根据索引动态渲染每个子项。同时添加一个 `key` 属性以帮助 React 识别哪些部分发生了更改。

function Carousel<T>(props: CarouselProps<T>) {
  const { items } = props;

  return (
    <div className="carousel">
      {items.map((item, index) => (
        <div key={index} className={`slide ${index === currentSlide ? 'active' : ''}`}>
          <div>{item.content}</div>
        </div>
      ))}
    </div>
  );
}

4. **处理滚动**：
当用户滚动到列表底部时，增加 `currentSlide` 并更新状态。如果已经到了最后一项，可以将其设置回第一项开始新的一轮循环。

function handleScroll() {
  if (currentSlide + 1 >= items.length) {
    setCurrentSlide(0);
  } else {
    setCurrentSlide(currentSlide + 1);
  }
}

// 使用 React Hooks useEffect 进行监听
useEffect(() => {
  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
}, [handleScroll]);

5. **样式和布局**：
别忘了添加 CSS 样式来实现滚动效果，比如使用 CSS Scroll Snap Points 或其他动画库来实现平滑过渡。