问题一:
React项目报错:
Warning: Each child in an array or iterator should have a unique "key" prop.
原因:
性能问题,这个是和React的dom-diff算法相关的,react对dom做遍历的时候,会根据data-reactid生成虚拟dom树,如果没有手动的添加key值的话,react是无法记录你的dom操作的,它只会在重新渲染的时候,继续使用相应的dom数组的序数号(array[index]这种)来比对dom树
解决方法:
对render中遍历的元素添加key属性,key值最好是映射对应的数组数据,而与index无关
例子:
<ul className="ul-1">
{
this.state.data.map(function(data){
return <li key={data.name}><span>{data.float}</span><h2>{data.number}</h2><p>{data.name}</p></li>
})
}
</ul>
这里,给li元素设置key值则可以避免Warning警告
参考链接:
https://www.zhihu.com/question/37701739
问题二:
在React项目中使用Echarts的时候,在componentDidMount中执行绘制图表的函数echarts.init(#id),提示获取不到宽高,因此,绘制出来的图表呈现出压扁的状态(或者没有绘制),代码如下
class Echarts extends React.Component{
constructor(props){
super(props);
}
componentWillMount(){
}
componentDidMount(){
this.drawCharts();
}
drawCharts(){
var myChart = echarts.init(document.getElementById(this.props.id)),
that = this,
option = {
title : {
text : this.props.option.title || '',
textStyle : {
color : '#666666',
fontSize : '14'
},
left : '3%'
},
legend : {
data : (function(){
var arr = [];
that.props.option.series.map(function(result){
arr.push(result.name);
})
return arr;
})(),
textStyle : {
color : '#666666'
},
right : '3%',
selectedMode : this.props.option.selectedMode || 'single'
},
tooltip : {
show : true,
trigger : 'axis',
triggerOn : 'mousemove',
lineStyle : {
color : '#666666'
}
},
grid : {
left : '3%',
right : '3%',
bottom : '14%',
containLabel : true
},
dataZoom : [
{
show : true,
type : 'slider',
xAxisIndex : [0],
backgroundColor : '#FFF',
fillerColor : 'rgba(76, 225, 221, .3)',
borderColor : 'rgba(0, 0, 0, 0)',
dataBackground : {
lineStyle : {
color : 'rgba(0, 0, 0, 0)'
},
areaStyle : {
color : 'rgba(255, 105, 87, .3)'
}
},
handleIcon : 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize : '80%',
handleStyle : {
color : '#64dcd3'
},
textStyle : {
color : '#666666'
},
left : '14%',
right : '10%',
bottom : 0
}
],
xAxis : {
type : 'category',
name : this.props.option.xAxis.name,
nameLocation : 'start',
nameGap : '25',
boundaryGap : false,
data : this.props.option.xAxis.data,
axisLine : {
lineStyle : {
color : '#666666'
}
},
splitLine : {
show : true,
lineStyle : {
color : '#f7f7f7'
}
}
},
yAxis : [
{
type : 'value',
name : this.props.option.yAxis.name || '',
axisLine : {
lineStyle : {
color : '#666666'
}
},
splitLine : {
show : true,
lineStyle : {
color : '#f7f7f7'
}
}
}
],
series : (function(){
var arr = [];
that.props.option.series.map(function(result, index){
arr.push({
name : result.name,
type : 'line',
showAllSymbol : true,
smooth : true,
data : result.data,
lineStyle : {
normal : {
color : color[index]
}
},
itemStyle : {
normal : {
color : color[index],
borderWidth : '1',
borderColor : color[index]
}
}
})
})
return arr;
})()
};
myChart.setOption(option);
}
render(){
return (
<div id={this.props.id} style={{width:'100%', height:'100%'}}></div>
)
}
}
原因:
可能是在执行componentDidMount的时候,页面还没有完全渲染完成样式表,导致获取不到完整高度
解决办法:(暂时处理方案)给componentDidMount中的drawCharts方法加上一个延时器(setTimeout)即可