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