React学习-业务中模块的拆分
发布时间:2020-12-15 07:24:09 所属栏目:百科 来源:网络整理
导读:[React学习] 业务中模块的拆分 根据官网的例子 React编程思想 props 是一种从父级传递数据到子级的方式。 Example 父级: var FilterableProductTable = React.createClass({ render: function () { return ( div SearchBar / ProductTable products = {this.
[React学习] 业务中模块的拆分根据官网的例子 React编程思想 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(每一行的商品) (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |