响应式轮播，在React中更改移动设备上的itemsToShow

import React, { useState, useEffect } from 'react';
import { useMediaQuery } from 'react-responsive';

const ResponsiveCarousel = () => {
  const isSmallScreen = useMediaQuery({ maxWidth: 768 });
  const isMediumScreen = useMediaQuery({ minWidth: 769, maxWidth: 1024 });
  const isLargeScreen = useMediaQuery({ minWidth: 1025 });

  const [itemsToShow, setItemsToShow] = useState(3);

  useEffect(() => {
    if (isSmallScreen) {
      setItemsToShow(1);
    } else if (isMediumScreen) {
      setItemsToShow(2);
    } else if (isLargeScreen) {
      setItemsToShow(3);
    }
  }, [isSmallScreen, isMediumScreen, isLargeScreen]);

  return (
    <div>
      {/* 根据itemsToShow生成轮播项 */}
      <Carousel itemsToShow={itemsToShow} />
    </div>
  );
};

export default ResponsiveCarousel;