在很多前端架構中todos都是一個小的參考例子，在react中當然也是不例外的，先來看看最終的效果先。。。
這個就是官方的例子，我們先來分析下他是由那及格組建組合成的。。。
再來分析下他是的資料最終是由那些地方過來的。。。
由于我們在react裡面傳遞的參數都是不能跨級傳遞的，都是通過一級級往下傳遞的，如下圖所示：
然後再Ul組建裡面用props來進行傳遞，因為是數組我們可以使用數組的方式進行傳遞。。
但是這種方式隻要懂得程式設計的朋友們應該都知道是不科學的，當然react也不列外，他給我們開發者預留了map方法來進行資料周遊
然後在對資料進行輸出：
效果好像出現了。。。
在分析下原理...
首先用getInitialState來對屬性進行模拟，
然後在Zong組建裡面用<Ul todos={this.state.todos} /> 對她進行傳遞到ul裡面，
然後在Ul裡面用map方法對資料進行傳遞到li裡面，
然後在li裡面通過{this.props.todo.text}進行取出
上面圖檔的代碼隻是僞代碼，可以能有個别地方沒修正，測試代碼如下所示：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/react.js"></script>
<script src="./js/react-dom.js"></script>
<script src="./js/browser.min.js"></script>
</head>
<body>
<div id="dome"></div>
<script type="text/babel">
//搜尋區域
var Ck = React.createClass({
render:function(){
return(
<div>
<input type="text" placeholder="你要幹嘛？" />
</div>
);
}
});
//清單項區域
var Lists = React.createClass({
render:function(){
return(
<li>
<label>
<input type="checkbox" checked={this.props.todo.isDown} />
{this.props.todo.text}
</label>
<button>删除</button>
</li>
);
}
});
//清單框區域
var Ul = React.createClass({
render:function(){
return(
<ul>
{
this.props.todos.map(function(item,index){
return <Lists todo={item} key={index} />
})
}
</ul>
);
}
});
//狀态組建
var Status = React.createClass({
render:function(){
return(
<div>
<input type="checkbox" />
3 已完成 / 3 總數
<button>清除已完成</button>
</div>
);
}
});
//總組建
var Zong = React.createClass({
getInitialState:function(){
return {
todos :[
{text:'6點起床',isDown:true},
{text:'7點出門',isDown:true},
{text:'8點吃早飯',isDown:false},
{text:'9點上班',isDown:true},
{text:'12點下班',isDown:false}
],
isAllChecked: false
}
},
render:function(){
return(
<div>
<Ck />
<Ul todos={this.state.todos} />
<Status />
</div>
);
}
});
ReactDOM.render(
<Zong />,
document.getElementById('dome')
);
</script>
</body>
</html> 轉載于:https://www.cnblogs.com/leigood/p/6112115.html