Question

我正在尝试为每个幻灯片轮播创建多个项目，我需要使用不同的屏幕断点来更改每个幻灯片的项目数。

例如，当窗口宽度大于1200px时，我希望每张幻灯片显示4个项目，（992px-1200px）之间为3个，（768-992px）之间为2个，较小的屏幕为1个。

我想到的想法是创建一个事件，该事件会在达到某个断点时更改状态：

  state: {
    itemsNum: 1
  }

  const createSlides  = () => {
        let slides = [];
        let itemsNum = this.state.itemsNum;

        for (let i = 0; i < products.length ; i = i + itemsNum) {
            slides.push(products.slice(i, i + itemsNum))
        }

        return slides;
    }

   const slides =  createSlides ();


   slides.map (........)// rendering the items in the slide

在我看来，这只是一个不完整的想法，但我需要使该想法成功运行的完整解决方案。

从反应的角度来看，实现此目标的更好方法是什么？

Answer 1

好了，说说我的看法，您可以使用“事件处理程序”。

像这样：window.addEventListener('onresize', createSlides)

随着时间的流逝，我还没有完成全部工作，但是如果您想对此有所了解，或者您对此方法感兴趣，我可以告诉您确切的方法。

Answer 2

您可以使用 window.onresize 。

window.onresize = function（event）{ ...};

如何在调整窗口大小时更改状态？

2 个答案: