React使用Swiper组件警告信息

错误信息

文字

[antd-mobile: Swiper] Swiper needs at least one child.

图片

错误代码

<Swiper slideSize={70} trackOffset={32} loop stuckAtBoundary={false} onIndexChange={(index) => click(index)}>
  {items}
</Swiper>

问题分析

这个警告信息说明在使用 Swiper 组件时，至少需要一个子元素。Swiper 组件是 antd-mobile 库中的一个轮播组件，用于展示多个滑动项（通常是图片）。

解决方案

你可以在 Swiper 组件的父级容器中添加一个判断条件，确保至少有一个子元素存在。这样，当没有子元素时，警告信息就不会触发。

示例

{items && items.length > 0 && <Swiper slideSize={70} trackOffset={32} loop stuckAtBoundary={false} onIndexChange={(index) => click(index)}>{items}</Swiper>}