antd中carousel使用不当导致的轮播图无法显示问题

平时我们开发前端很多很多情况下都是使用 antd 组件，毕竟其比较大众，使用效果也很多，支持更改效果等，但使用过程中，也难免出现一些小问题，一般除了原则性问题，我们都可以使用技巧、定制等方式来避免

这两天我就碰到了一个 carousel 轮播图的问题，平时没注意细节，一般是直接用的，今天使用了一个 carousel 组件，然后由于是测试数据，我直接自己生成一个测试数据试试效果，结果一个习惯性的 list 渲染判断条件加入，直接导致渲染不出来了，代码如下所示

js 复制代码

<div>
    <Carousel
        className="carsousel"
        autoplay
        autoplaySpeed={5000}
        dots={false}
        ref={ref}
        waitForAnimate
        >
        {
            list && list.length > 0 &&
            list.map((item, index) => {
                return (
                    <div key={index}>
                        <Table
                            columns={columns}
                            dataSource={list[index]}
                            pagination={false} />
                    </div>
                )
            })
        }
    </Carousel>
</div>

然后犀利的我，马上把循环里面的内容粘出来，发现正常显示，于是就注意到了上面的 list，果然将 list 判断放在 carousel 前面就可以解决了问题了

js 复制代码

<div>
    {
        list && list.length > 0 &&
        <Carousel
            className="carsousel"
            autoplay
            autoplaySpeed={5000}
            dots={false}
            ref={ref}
            waitForAnimate
            >
            {
                list.map((item, index) => {
                    return (
                        <div key={index}>
                            <Table
                                columns={columns}
                                dataSource={list[index]}
                                pagination={false} />
                        </div>
                    )
                })
            }
        </Carousel>
    }
</div>

话说这个问题以前应该就碰到了，为何今天才发现，因为以前我写这类组件时，一般是有值才到这里，所以没有出现 list 判断问题，所以没有发现

通过这个问题，我想大家应该已经猜到了问题所在：

当 Carousel 组件创建后，会直接获取其子组件，然后将其子组件按照自己的逻辑开始轮播，此时我们加入了一个 list 判断，且开始的时候 list 是没有值的，这个时候 Carousel获取到的子组件就会为空，因为内部显示空白，当我们的 list 赋值时，此时内部理论上是可以重新渲染了，然后可惜的是 Carousel 在重新触发渲染时，并没有渲染轮播子组件，从而导致空白

因此解决方案就像我们上面说的那样，既然重新渲染不能正常显示，那么我们就让它初次渲染正常显示即可，我们只需要保证 carousel 渲染前，数据正常即可，改变时，我们直接销毁重建 Carousel 即可