[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>
      )
    }
});