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

ゝ一纸荒年。 2022-06-17 04:56 125阅读 0赞

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

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

### Example ###

父级:

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

子级:

### 根据官网示例写的代码（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 <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（每一行的商品）

[React]: http://reactjs.cn/react/docs/thinking-in-react-zh-CN.html