[React学习] 业务中模块的拆分

根据官网的例子 React编程思想
props 是一种从父级传递数据到子级的方式。

Example

父级:

var FilterableProductTable  = React.createClass({
  render: function@H_404_20@(){
  return (
    <div> <SearchBar /> <ProductTable products={this.props.products} /> </div> ) } });

子级:

var ProductTable = React.createClass({
    render: function@H_404_20@(){
      var rows = [];
      var lastCategory = null;
      this.props.products.forEach(function@H_404_20@(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（每一行的商品）