React项目中的一些问题

问题一：

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）即可