[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）

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>.&#10;

收获

在根据UI拆分模块的时候，根据数据模型进行拆分。
代码编写的时候，在较简单的例子里，通常自顶向下要容易一些，然而在更大的项目上，自底向上地构建更容易

-FilterableProductTable (整体)
-SearchBar（输入搜索框）
-ProductTable（显示的数据表格）
-ProductCategoryRow（分类名/列表头）
-ProductRow（每一行的商品）