antd中carousel使用不当导致的轮播图无法显示问题
平时我们开发前端很多很多情况下都是使用 antd 组件，毕竟其比较大众，使用效果也很多，支持更改效果等，但使用过程中，也难免出现一些小问题，一般除了原则性问题，我们都可以使用技巧、定制等方式来避免
这两天我就碰到了一个 carousel 轮播图的问题，平时没注意细节，一般是直接用的，今天使用了一个 carousel 组件，然后由于是测试数据，我直接自己生成一个测试数据试试效果，结果一个习惯性的 list 渲染判断条件加入，直接导致渲染不出来了，代码如下所示
js
复制代码
className="carsousel" autoplay autoplaySpeed={5000} dots={false} ref={ref} waitForAnimate > { list && list.length > 0 && list.map((item, index) => { return ( columns={columns} dataSource={list[index]} pagination={false} />
)
})
}
然后犀利的我，马上把循环里面的内容粘出来，发现正常显示，于是就注意到了上面的 list，果然将 list 判断放在 carousel 前面就可以解决了问题了
js
复制代码
{
list && list.length > 0 &&
className="carsousel" autoplay autoplaySpeed={5000} dots={false} ref={ref} waitForAnimate > { list.map((item, index) => { return ( columns={columns} dataSource={list[index]} pagination={false} />
)
})
}
}
话说这个问题以前应该就碰到了，为何今天才发现，因为以前我写这类组件时，一般是有值才到这里，所以没有出现 list 判断问题，所以没有发现
通过这个问题，我想大家应该已经猜到了问题所在：
当 Carousel 组件创建后，会直接获取其子组件，然后将其子组件按照自己的逻辑开始轮播，此时我们加入了一个 list 判断，且开始的时候 list 是没有值的，这个时候 Carousel获取到的子组件就会为空，因为内部显示空白，当我们的 list 赋值时，此时内部理论上是可以重新渲染了，然后可惜的是 Carousel 在重新触发渲染时，并没有渲染轮播子组件，从而导致空白
因此解决方案就像我们上面说的那样，既然重新渲染不能正常显示，那么我们就让它初次渲染正常显示即可，我们只需要保证 carousel 渲染前，数据正常即可，改变时，我们直接销毁重建 Carousel 即可