[React学习] 业务中模块的拆分
根据官网的例子 React编程思想
props 是一种从父级传递数据到子级的方式。
Example
父级:
var FilterableProductTable = React.createClass({
render: function(){
return (
<div>
<SearchBar />
<ProductTable products={this.props.products} />
</div>
)
}
});
子级:
var ProductTable = React.createClass({
render: function(){
var rows = [];
var lastCategory = null;
this.props.products.forEach(function(product){ //通过this.props.products 来获取父级传过来的数据
if(product.category !== lastCategory){
rows.push(
// 插入分类标题的头部
<ProductCategoryRow category={product.category} key={product.category} />
)
}
rows.push(
<ProductRow product={product} key={product.name} />
);
lastCategory = product.category;
});
return (
<table className="productTable">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
</tr>
</thead>
<tbody>{rows}</tbody>
</table>
)
}
});
根据官网示例写的代码(codepen)
height="265" scrolling="no" title="LWbYKY" src="//codepen.io/ziazan/embed/LWbYKY/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen <a href="http://codepen.io/ziazan/pen/LWbYKY/">LWbYKY</a> by ziazan (<a href="http://codepen.io/ziazan">@ziazan</a>) on <a href="http://codepen.io">CodePen</a>. 收获
在根据UI拆分模块的时候,根据数据模型进行拆分。
代码编写的时候,在较简单的例子里,通常自顶向下要容易一些,然而在更大的项目上,自底向上地构建更容易
-FilterableProductTable (整体)
-SearchBar(输入搜索框)
-ProductTable(显示的数据表格)
-ProductCategoryRow(分类名/列表头)
-ProductRow(每一行的商品)