react-elastic-carousel动态itemsToShow取决于屏幕大小

Question

我在垂直模式下使用react-elastic-carousel。其中的项目有固定的高度。我希望显示的项目数量取决于屏幕上的可用空间。

在我的App.tsx中：

<div className="App-body">
  <Carousel verticalMode itemsToShow={1}>
    {state.items.map((item, index) => <Item key={index}>{item.text}</Item>)}
  </Carousel>
</div>

https://sag1v.github.io/react-elastic-carousel/verticalMode

Item.tsx

import styled from 'styled-components';

export default styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  width: 100%;
  background-color: #683bb7;
  color: #fff;
  margin: 15px;
  font-size: 4vw;
`;

在这一点上，我完全不确定如何处理这个问题。以某种方式，组件必须获取其父元素的高度，知道项目的高度，并计算出适合的数字。当然，每次调整屏幕大小时都必须执行此操作。有什么想法吗？

Answer 1

在Carousel组件中使用breakPoints作为道具：

 const breakPoints = [ 
   {width:1,itemsToShow:1},
   {width:500,itemsToShow:2},
   {width:768,itemsToShow:3},
   {width:1100,itemsToShow:4}
 ]