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

本文介绍了如何使用React进行模块拆分,并通过一个具体例子详细展示了数据如何从父组件传递到子组件的过程。学习了根据UI和数据模型进行合理拆分的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

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(每一行的商品)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值