React中的Konva无限网格

import React, { useEffect, useRef } from 'react';
import { Stage, Layer, Rect } from 'react-konva';
import throttle from 'lodash/throttle';

const InfiniteGrid = () => {
  const stageRef = useRef(null);

  useEffect(() => {
    const handleScroll = throttle(() => {
      // 处理滚动逻辑
    }, 100);

    stageRef.current.addEventListener('wheel', handleScroll);

    return () => {
      stageRef.current.removeEventListener('wheel', handleScroll);
    };
  }, []);

  return (
    <Stage ref={stageRef} width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        {/* 渲染网格元素 */}
        {Array.from({ length: 1000 }, (_, i) => (
          <Rect key={i} x={i * 50} y={i * 50} width={50} height={50} fill="blue" />
        ))}
      </Layer>
    </Stage>
  );
};

export default InfiniteGrid;