如何在响应式轮播中制作响应式数字os

如何解决如何在响应式轮播中制作响应式数字os

我有一个可同时显示3个元素的React Carousel。我想根据可用大小调整此元素数量。例如

const RCarousel = ({items}) => {
  const numItems = 3;

  return (
    <Carousel
      numItemsPerView={numItems}
    >
      {
        items.map(
          (item) => <Item item={item} />
        )
      }
    </Carousel>
  )
}

如果 RCarousel 的大小为numItems，我想将tablet size更改为2，如果mobile size的大小为1，我想更改。

RCarousel 的窗口宽度可能不同。任何建议如何做到这一点？ ：）

解决方法

您可以使用window.innerWidth和window.innerHight来获取窗口的大小。 一旦有了尺寸，就可以有条件地对其进行更改。我会将numItems粘贴在useState中，并使用useEffect进行更改。遵循这些原则

const [numItems,setNumItems] = useState(3);
const width = window.width;
useEffect(() => {
    if (width > 800) {
        setNumItems(3);
    } else {
        setNumItems(1);
    }
},[width])

,

改善@szczocik的答案，我可以使用以下方法解决它：

创建了一个挂钩以获取窗口大小

useWindow.size.js

import {useState,useEffect} from 'react'

const useWindowSize = () => {
  const [windowSize,setWindowSize] = useState({
    width: undefined,height: undefined,});

  useEffect(() => {
    if (typeof window === 'undefined') return; //specific for gatsby or applications using webpack
    
    const handleResize = () => {
      setWindowSize({
        width: window.innerWidth,height: window.innerHeight,});
    }
    
    window.addEventListener("resize",handleResize);
    
    handleResize();
    
    return () => window.removeEventListener("resize",handleResize);
  },[]);

  return windowSize;
}

export default useWindowSize;

mycomponent.js

  const windowSize = useWindowSize();

  useEffect(() => {
    const width = windowSize.width;

    if (width >= 1200) {
      if (numItems !== 3) {
       setNumItems(3);
      }
    } else if (width > 900) {
      if (numItems !== 2) {
        setNumItems(2);
      }
    } else {
      if (numItems !== 1) {
        setNumItems(1);
      }
    }
  },windowSize)