Ken428965 2022-10-27 20:05 采纳率: 54.3%
浏览 324
已结题

react,结合现有代码引入antd mobile V5.22里的Swiper走马灯组件,浏览器报错`Swiper` needs at least one child

在使用的react版本:

img


已写的部分代码:

export default class HouseDetail extends Component {
// ...
// 渲染轮播图结构
  renderSwipers() {
    const {
      houseInfo: { houseImg }
    } = this.state

    return houseImg.map(item => (<Swiper.Item>
        <a  key={item} href="https://www.baidu.com">
          <img src={BASE_URL + item} alt="" />
        </a>
      </Swiper.Item>
    ))
  }
// ...
return (
// ...
<div className={styles.slides}>
          {!isLoading ? (
            <Swiper indicatorProps={{
            color: 'white',
        }} defaultIndex={0} loop autoplay infinite autoplayInterval={5000}>
              {this.renderSwipers()}
            </Swiper>
          ) : (
            ''
          )}
        </div>
)
// ...
}

目前效果如下,轮播图及其底部几个小原点没有显示出来,且chrome浏览器报错:

img

img


请问代码出了什么问题?如何修改?望在现有代码里举例说明

  • 写回答

2条回答 默认 最新

  • hahai1212 2022-10-27 20:24
    关注

    警告是:swiper下面必须有chile。建议你先打印出你遍历的houseImg是否正确

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 11月1日
  • 已采纳回答 10月28日
  • 创建了问题 10月27日

悬赏问题

  • ¥100 采用栈和深度优先算法对我的代码进行修改显示路径
  • ¥15 pointnet2包安装
  • ¥20 射频功率问题,解答者有酬谢!
  • ¥80 构建降雨和积水的预测模型
  • ¥15 #Qt Transform setTransform()在鼠标拖动移动视角是一致在原地不动,无法变换视角(细微观察似乎视图有在原地抖动),无法变换视角(细微观察似乎视图有在原地抖动)
  • ¥50 如何利用无人机拍摄的数码照片测量鸟卵的长短径
  • ¥100 github贡献者给与奖励
  • ¥15 使用DS18B20+ESP8266获取温度数据返回-127.00
  • ¥15 odbc代码新增sqlserver数据源
  • ¥15 求一个USB指纹识别的驱动