关于 Material UI && react-swipeable-views 轮播图的一个坑

• 问题
  将自己请求的图片放入轮播图后,轮播图会随机的闪烁,然后页面会自动回到顶部.

• 解决方案
  MUI 的轮播图借助了react-swipeable-views 这个第三方库,这个库对移动端有专门的适配.

  {images.map((step, index) => (
            <div key={step.label}>
              {Math.abs(activeStep - index) <= 2 ? (
                <Box
                  component="img"
                  sx={{
                    height: 255,
                    display: 'block',
                    maxWidth: 400,
                    overflow: 'hidden',
                    width: '100%',
                  }}
                  src={step.imgPath}
                  alt={step.label}
                />
              ) : null}
            </div>
          ))}
  

  改为:

  {images.map((step, index) => (
            <div key={step.label}>
                <Box
                  component="img"
                  sx={{
                    height: 255,
                    display: 'block',
                    maxWidth: 400,
                    overflow: 'hidden',
                    width: '100%',
                  }}
                  src={step.imgPath}
                  alt={step.label}
                />
            </div>
          ))}
  

因为我没有去看它的源码,也就不太清楚具体的逻辑,所以只能推断它在轮播图的时候返回了 null,导致轮播图闪了一下,出现问题.