使用antd时遇到的问题1

最新推荐文章于 2024-01-17 16:11:10 发布

追逐春天的大孩子

最新推荐文章于 2024-01-17 16:11:10 发布

阅读量929

点赞数

CC 4.0 BY-SA版权

分类专栏： react 文章标签： antd

本文链接：https://blog.csdn.net/weixin_43709908/article/details/103648273

react 专栏收录该内容

38 篇文章

订阅专栏

在使用antd Carousel组件时遇到自动轮播未启动和动态加载数据导致的展示不全问题。原因是轮播图数据在加载前后数量不一致。解决方案包括在state中添加加载完成标志，数据加载完后更新状态，确保数据加载完毕再渲染组件，以及通过设置div盒子的默认高度解决闪动问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.在使用antd的Carousel组件时，轮播图刚开始不会进行自动轮播，并且在从其他页面跳转到当前页面时，轮播图展示不完全的问题

原因：轮播图数据是动态加载的，加载完成前后轮播图数量不一致

解决方案：1.在state中添加表示轮播图加载完成的数据

2.在轮播图加载完成时，修改该数据状态值为true

3.只有轮播图数据加载完成的情况下，才渲染轮播图组件

4.闪动问题，是将轮播图放在一个div盒子里面进行展示，给这个盒子一个默认的类名，让其默认高度问盒子的高度，这样轮播图下面的数据就不会出现闪动的问题了

话不多说，直接上代码

export default class Index extends React.Component {
    state = {
        // 轮播图数据
        swipers: [],
        // 轮播图是否加载完成
        isSwiperLoad: false,

    }
    //   请求轮播图方法
    async getSwiperData() {
        const res = await axios.get("/home/swiper")
        // console.log(res)
        this.setState({
            swipers: res.body,
            isSwiperLoad: true
        })
    }
// 页面dom元素加载完成调用
    componentDidMount() {
        this.getSwiperData()
    }
    render() {
        return (
            <div className="index">
                {/* 轮播图菜单 */}
                <div className="swiper">
                    {this.state.isSwiperLoad ? <Carousel
                        autoplay
                        infinite>
                        {this.state.swipers.map(item => (
                            <img
                                key={item.id}
                                src={`http://localhost:8080${item.imgSrc}`}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                            />
                        ))}
                    </Carousel> : ''

                    }
                </div>
</div>
）
在css文件中
.swiper{
height：轮播图图片的高度
}