总结一下初学React的坑。
1、class必须用className代替，否则不识别，因为和js混淆
很多属性不识别，比如colspan
<table class="ui">
JSX要写成
<table className="ui">
<th colspan='6'></th>
JSX要写成
<th colSpan='6'></th>
我真是哔了狗了。对于不知道的入门者来说，几万年找不出错误也是很正常的，我一直在百度React 不识别class什么的，啥都没有，偶然看demo发现他写的是className，才想起来class是js的关键字，可我又不写ES6，我也不用class啊。
2、迭代多重json
这个东西在jquery里还是很简单的，就是，麻烦!
这也是JSX的好处。
事情是这样的，某天，我突然想装逼，考虑到我也看了几十分钟的React，说不定会用了，于是在一个文件里没有写jquery，用了React。
我的需求是这样的：
我有一个json：
var json={
'num':5,
'_s1':{'class_Name':'balabala','point':'3','loc':'balabala'},
'_s2':{'class_Name':'balabala','point':'3','loc':'balabala'},
'_s3':{'class_Name':'balabala','point':'3','loc':'balabala'},
'_s4':{'class_Name':'balabala','point':'3','loc':'balabala'},
'_s5':{'class_Name':'balabala','point':'3','loc':'balabala'},
}大概就是这样的结构，两重嵌套，我要把它放到一个好看的表格里
表格是这个样子的：
我的table结构是
<table class="ui celled padded orange table"><thead><tr><th class="single line">课程名称</th><th>课程学分</th><th>所属专业</th><th>上课地点</th><th>热度</th><th>是否选择</th></tr></thead><tbody><tr><td><h2 class="ui aligned header">高等数学</h2></td><td class="single line"><div class="ui red button"><i class="heart icon"></i>课程热度</div><a class="ui basic red left pointing label">20</a></td><td><!--<div class="ui star rating"data-rating="3"data-max-rating="3"></div>-->信息二</td><td class="right aligned"><a href="#">信息三</a></td><td>信息4</td><td class="ui center"><button class="circular ui icon button"id="show_circle"><i class="icon add"></i></button></td></tr><tr><td><h2 class="ui aligned header">高等数学</h2></td><td class="center single line"><div class="ui red button"><i class="heart icon"></i>课程热度</div><a class="ui basic red left pointing label">20</a></td><td><!--<div class="ui star rating"data-rating="3"data-max-rating="3"></div>-->信息二</td><td class="right aligned"><a href="#">信息三</a></td><td>信息4</td><td class="ui center"><button class="circular ui icon button"id="show_circle"><i class="icon add"></i></button></td></tr></tbody><tfoot><tr><th colspan="6"><div class="ui right floated pagination menu"><a class="icon item"><i class="left chevron icon"></i></a><a class="item">1</a><a class="item">2</a><a class="item">3</a><a class="item">4</a><a class="icon item"><i class="right chevron icon"></i></a></div></th></tr></tfoot></table>大致就是n个<tr> 每个<tr> 里n个<td>
我需要把<td> 里放上json的数据。
我先是选择组件迭代
定义一个<tr> 组件，把<td> 放里面并展开
就像这样（错误代码）：
var Class_TR = React.createClass({
render: function() {
return <tr>
<td><h2 class="ui aligned header">{this.props.classname}</h2></td>
<td class="single line">{this.props.point}</td>
<td>{this.props.major}</td>
<td class="left aligned">{this.props.loc}</td>
<td><div class="ui red button"><i class="heart icon"></i>喜欢</div><span class="ui basic red left pointing label">20</span></td>
<td class="center aligned"><button class="circular ui icon button" id="{this.props.sid}"><i class="icon add"></i></button></td>
</tr>;
}然后在做tbody组件，方法同理
这里就有坑，
return <tr>
<td><h2 class="ui aligned header">{this.props.classname}</h2></td>这个就会报错，他说text不能是tr的子元素，于是就很纳闷，我哪有text啊？
百度了一下，发现是tr后面多打了个空格，他认为你后面跟着的是text，就很气，但你打回车就没问题。。。。
这和JSX的解析原理有关，下一个坑也是这个的
做好组件之后发现迭代有毛病
单次迭代，map倒是很容易搞定
附赠json转map方法
/**
*对象转换为Map
*/
function objToStrMap(obj) {
let strMap = new Map();
for (let k of Object.keys(obj)) {
strMap.set(k, obj[k]);
}
return strMap;
}
/**
*json转换为map
*/
function jsonToMap(jsonStr) {
return objToStrMap(jsonStr);
}Map迭代Example
var options = utils.Map_Class.map(function(data){
return <option value={data.code} key={data.code} >{data.cn}</option>你看，单层的迭代一下搞定。其实这里还是有个大坑，一会说。
还有一种迭代方式更爽,写个数组，往里面push dom 元素，然后在下面return里加上{rows}这个数组，就可以封装组件，也能达到多次迭代
然后push时就会有坑。
var Class_TE_ALL=React.createClass({
render:function(){
var each_tr=[];
var sid="";
for(var i = 0;i<this.props.Map_Class.num;i++)
{
sid="_"+i;
each_tr.push(<Class_TR key="{this.props.Map_Class[sid]['classname']}" sid="{sid}" classname="{this.props.Map_Class[sid]['classname']}" point="{this.props.Map_Class[sid]['point']}" major="{this.props.Map_Class[sid]['major']}" loc="{this.props.Map_Class[sid]['loc']}" />)
}
return <tbody>{each_tr}</tbody>;
}组件封装还需要层层传参，最外层传个Map，然后在解析一层传下去，再在内层分别获取值，不喜欢这样，所以最后没有用组件，用的直接for迭代。
严重错误代码
var Class_TR = React.createClass({
render: function(){
var rows=[];
var item={};
var sid="",uid="",vid="";
//console.log(Json_Class)
for (var i = 0; i <Json_Class["num"]; i++) {
item=Json_Class["_"+i];
sid="-"+i;uid="_"+i;vid="+"+i;
rows.push(<tr key={sid}>);
rows.push(<td key={item.class_name+"_"+i}><h2>{item.class_name}</h2></td>);
rows.push(<td key={item.point+"_"+i}>{item.point}</td>);
rows.push(<td key={item.major+"_"+i}>{item.major}</td><td key={item.loc+"_"+i}>{item.loc}</td>);
rows.push(</tr>);
}
return <tbody>{rows}</tbody>;
}
}); 看起来蛮不错的，不需要动态传参，把静态参数显示出来。
但其实除了class的坑，JSX解析理解也是很坑的。
不要以为在{}里就可以开心的写JS代码，看见标签还是给你往Html上解析
所以上述rows.push()会push出一堆
);rows.push(
很纳闷吧！
因为他看见<>就会去找标签，然后就不执行js代码了
所以：
rows.push()一行要把所有Dom元素都push进去！！！
别管什么结构了。。。。
最后要写成
var Class_TR = React.createClass({
render: function(){
var rows=[];
var item={};
var sid="",uid="",vid="";
//console.log(Json_Class)
for (var i = 0; i <Json_Class["num"]; i++) {
item=Json_Class["_"+i];
sid="-"+i;uid="_"+i;vid="+"+i;
rows.push(<tr key={sid}><td key={item.class_name+"_"+i}><h2 className = "ui aligned header">{item.class_name}</h2></td><td key={item.point+"_"+i} className= "single line">{item.point}</td><td key={item.major+"_"+i}>{item.major}</td><td key={item.loc+"_"+i} className="left aligned">{item.loc}</td><td key={vid}><div className="ui red button"><i className="heart icon"></i>喜欢</div><span className="ui basic red left pointing label">20</span></td><td key={uid} className="center aligned"><button className="circular ui icon button" id={uid+"_"}><i className="icon add"></i></button></td></tr>);
}
return <tbody>{rows}</tbody>;
}
});才能把json迭代并放到td里
从结果上来说，若不使用组件封装的话，JSX写起来只是用了JS变量嵌入html里，和jsp，php写法没什么区别，并没有很便利。（当然那些是后端模板）
所以还是要复用组件！！！！
还有一种迭代方法，map也可以多重迭代。那个写法还是很简洁的。
感觉今天把这辈子JSX的坑都踩完了。
尤其是他报错不给报是哪，我在底下tr错的时候，一直以为组件遍历错误。
改了3小时的bug，整个人都快累死了。
功能还一点没做。