有些坑点记录在我的新博客上:http://www.woke20.com
一.很多时候,一些第三方组件出现的问题,都是因为在初始化时候没有第一时间拿到数据(异步请求数据),所有建议在组件之前进行判断是否有数据再进行渲染。类似如下写法
1.carousel组件在请求异步数据后,不能自动轮播。
解决技巧:
1.将carousel的autoplay设置为一个state,默认设置state为false,当请求到数据后,将state设置为true就可以解决。
2.在组件之前判断是否有数据,有数据再进行渲染。
2.carousel组件在请求异步数据后,图片被隐藏一部分。(因为组件没有在初始化时候就拿到数据,所以设置了默认高度为100px)
解决技巧:
1.可以给数据设置一组默认值
2.在组件之前判断是否有数据,有数据再进行渲染。(如果用这种方法就不要设置默认值了,影响数据判断)
3.最近在使用dva时,创建了PureComponent,但是依然发现只要通过dispatch触发了action,不论是state的值是不是改变了,render函数都会执行(页面会重新渲染)。比如下面这个函数,每次都是将flag赋值为true,但是连接该model的页面依然重新渲染了。
原因:
不论state的值是否改变,每一次通过reducer返回的state都是全新的对象,同时PureComponent进行的只是浅比较,对于引用类型只是比较了其地址。所以会触发render()
4.z-index失效的几种情况:
1⃣️.元素未设置定位。z-index是针对设置了定位的元素的(position: static除外的定位)。
2⃣️.父级元素层级低。
5.position: fixed失效
原因:父级元素中使用了transform属性
解决:将需要position:fixed的元素和使用position的元素放在不同的容器中
6.video在chrome下无法自动播放
原因:chrome禁用音频自动播放,所以视频必须静音才能自动播放。可以添加muted属性来静音
二.第三方组件使用
1.aplayer
在react中使用:
onInit()函数很重要,在这里生成aplayer对象,通过改对象可以添加事件。如果需要退出时候关闭播放器,就可以在componentWillMount()生命周期中,调用aplayer对象的destroy()方法,销毁播放器。
注意:如果一个页面有多个播放器,可以在onInit函数中将生成的aplayer对象push进一个数组,通过数组获取每个播放器。
2. 高德地图和百度地图定位
百度地图: 在使用百度地图浏览器定位时,发现只能获取到市级。原因:(如果浏览器内核是chrome 或者 ios10 ,需要开启https服务,才能使用浏览器定位,不然会采用IP定位,而IP定位只能获取到市级)。解决方法,升级https。
高德地图: