reactjs中使用三方UI库的问题总结

最近使用react引用了三方UI antd-mobile 和一些插件，在使用过程中遇到了一些问题，实际解决后写点心得，小记下，避免再次入坑。

• antd-mobile 中用到了最常见的 Carousel组件：
  组件属性如下：

![image.png](https://upload-images.jianshu.io/upload_images/9180520-4b75aa7081feb3b5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

• 引用demo加载写死的数据一点问题没有，但是当fetch 加载动态数据的时候，确不轮播了。找百度大娘吧，找了一圈没有答案，自己研究，问题很明确了肯定是异步数据的问题，Carousel拿到的是自己的子元素，所以必须在数据加载以后再轮播，走了个弯路。
• 在state里初始化了一个flag 为false ，在componentDidMount 里数据请求回来以后把flag改为true，最后一步，把Carousel 的API中autoplay 改为可控制的轮播，想什么时候轮播就什么时候轮播，让autoplay = {this.state.flag},完美解决。

• 引用swiper :

• swiper 可配置性强，同样遇到了上述问题，异步数据不轮播。即使在componentDidMount中初始化也不轮播，很郁闷，怎么回事哪，首先我升级了swiper，引用最新版本4.x.x, 撸完api发现，动态加载需要添加观察者，就是这两个鬼 observer:true, observeParents:true, ，于是很开心的加上了，然而....没有什么卵用。真的是。。。。。
  没办法，再细看api，柳暗花明又一api啊！于是，我在初始化的的时候把 init这个api设置为false,然后再在componentDidmount中调用swiper.init(),神奇的一幕发生了。居然自己跑起来了。
  废话不多少，贴上代码：
  
  image.png