React学习-业务中模块的拆分

[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(
            // 插入分类标题的头部
            
          )
        }
        rows.push(
          <ProductRow product={product} key={product.name} />
        );
        lastCategory = product.category;
      });
      return (
        <table className="productTable">
          <thead>
            <tr>
              <th>Nameth>
              <th>Priceth>
            tr>
          thead>
          <tbody>{rows}tbody>
        table>
      )
    }
});

根据官网示例写的代码（codepen）

height="265" scrolling="no" title="LWbYKY" src="//codepen.io/ziazan/embed/LWbYKY/?height=265&theme-id=0&default-tab=js,result&embed-version=2" allowfullscreen="true">See the Pen LWbYKY by ziazan (@ziazan) on CodePen.

收获

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

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