如何使用 Material UI MobileStepper 制作一个轮播视图，每个视图有多个项目

如何使用 Material UI MobileStepper 制作一个轮播视图，每个视图有多个项目

Mui 的移动步进器非常棒，如果我们想制作一个 轮播视图 ，但是如果我们想在每个视图中显示多个项目怎么办？这也很简单。在本文中，我们将创建一个组件 <SwipeableMobileStepper /> 它需要我们想要变成轮播视图的元素数组 孩子：JSX.Element[] ， 和 itemsPerView 所以我们可以根据需要在每个视图中渲染任意数量的项目。

预习

如何

我们将从这个开始 例子 在 mui 的文档中，只需几行更改即可将其转换为我们的通用轮播组件。

TL;NR

要旨

步骤1

在我们的组件 SwipeableMobileStepper.tsx 中，传入 props：

 接口 ISwipeableMobileStepperProps {  
 孩子：JSX.Element[]; // 要变成轮播的项目  
 itemsPerView：数量； // 我们想要在每个视图中有多少项目  
 }

第2步

计算应该有多少步（第 18 行）：

 const maxSteps = Math.ceil(children.length / itemsPerView);

第 3 步

为每个步骤渲染一个容器元素（第 39 行）：

 {[...Array(maxSteps)].map((_, index) => {  
 返回 （  
 <Box  
 键={`step-${index}`}  
 sx={{  
 显示：“弹性”，  
 alignItems：“拉伸”，  
 justifyContent: "空间均匀",  
 }}  
 >  
 {...} // 这是我们的下一步  
 </Box>  
 );  
 })}

第4步

在每个步骤容器中渲染 {itemsPerView} 项（第 49 行）：

 {children.slice(  
 索引 * itemsPerView,  
 索引 * itemsPerView + itemsPerView  
 )  
 .map((child, childIndex) => {  
 返回 （  
 <Box sx={{ mx: 1 }} key={`step-${index}-${childIndex}`}>  
 {React.cloneElement(child as JSX.Element, {})}  
 </Box>  
 );  
 })}

而已。我们有一个通用组件，我们可以传入我们想要变成轮播视图的元素以及我们想要在每个视图中显示多少元素。享受编码 =)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/27130/00231109