reactjs中使用三方UI库的问题总结
2018-07-20 本文已影响0人
TSDong
最近使用react引用了三方UI antd-mobile 和一些插件，在使用过程中遇到了一些问题，实际解决后写点心得，小记下，避免再次入坑。
- antd-mobile 中用到了最常见的
Carousel组件：
组件属性如下：
- 引用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
