[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)
收获
在根据UI拆分模块的时候,根据数据模型进行拆分。
代码编写的时候,在较简单的例子里,通常自顶向下要容易一些,然而在更大的项目上,自底向上地构建更容易
-FilterableProductTable (整体) -SearchBar(输入搜索框) -ProductTable(显示的数据表格) -ProductCategoryRow(分类名/列表头) -ProductRow(每一行的商品)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。