在react加ts加vite中实现鼠标移动实现黑图片翻页功能

在React应用中结合TypeScript (TS) 和Vite构建项目，并实现鼠标移动触发的黑图片翻页效果，你可以按照以下步骤操作：

1. **设置环境**:
- 安装必要的依赖：`npm install create-vite typescript @types/react react-dom @types/react-dom vite-plugin-react`
- 创建`.viterc.ts`配置文件，启用typescript支持：`import { create } from 'vite'; export default create({ ts: { transpileOnly: true }, plugins: [ ... ]; }`

2. **创建组件**:
- 新建一个名为`SlideShow.tsx`的文件，编写基础的滑动组件结构，包含两个隐藏的图片作为下一页和上一页，一个显示当前页面的元素，以及一个状态变量来跟踪当前页数。

// SlideShow.tsx
import React, { useState, useRef, useEffect } from 'react';

type Props = {
  // 图片路径数组
  images: string[];
};

const SlideShow = ({ images }: Props) => {
  const [currentPage, setCurrentPage] = useState(0);
  const slideRef = useRef<HTMLImageElement>(null);

  // 鼠标移动事件处理函数
  const handleMouseMove = (event: MouseEvent) => {
    if (slideRef.current && slideRef.current.contains(event.target)) {
      if (event.clientY < slideRef.current.offsetTop + slideRef.current.clientHeight / 2) {
        setCurrentPage((prevPage) => prevPage > 0 ? prevPage - 1 : images.length - 1);
      } else {
        setCurrentPage((prevPage) => prevPage < images.length - 1 ? prevPage + 1 : 0);
      }
    }
  };

  useEffect(() => {
    if (slideRef.current) {
      slideRef.current.addEventListener('mousemove', handleMouseMove);
      return () => slideRef.current.removeEventListener('mousemove', handleMouseMove);
    }
  }, []);

  // 显示图片
  const showImage = images[currentPage];
  
  return (
    <>
      <div style={{ position: 'relative', height: 'cover' }}>
        <img ref={slideRef} src={showImage} alt="Slide" />
      </div>
    </>
  );
};

export default SlideShow;

3. **使用组件**:
在App或其他需要的地方导入并使用这个`SlideShow`组件，传入你的图片数组。

// App.tsx 或者 main.tsx
import React from 'react';
import SlideShow from './SlideShow';
import images from './images'; // 假设你有一个包含图片路径的数组

function App() {
  return (
    <div className="App">
      <SlideShow images={images} />
    </div>
  );
}

export default App;