前言

大家在做业务系统的时候，很多地方都是列表增删改查，做这些功能占据了大家很长时间，如果我们有类似的业务，半个小时就能做出一套那是不是很爽呢。
这样我们就可以有更多的时间学习一些新的东西。我们这套框架对此做了下封装，适合的小伙伴也可以借鉴封装到自己的框架当中去。核心思想用的React
高阶组件解耦，接下来我们看看怎么用。

基础用法

1. 导入我们的业务组件
   import { BTable } from 'bcomponents';

2. 写好我们的页面模板。调用BTable的高阶组件BTable.tableEffectHoc，传入url和columns参数就可以了，是不是很简单

   @BTable.tableEffectHoc({   url: '/api/table/list', //url 参数   columns: columns // table columns 参数 }) class BasicTable extends React.Component {   render() {     return (       <div style={{marginBottom: '20px'}}>         基础 Table       </div>     );   } }  export default BasicTable; 

3. 查看演示
   

完整的一套增删改查

1. 创建list.js, 来配置和增强我们的table,注意我们需要使用Btable。

   import { BTable } from 'bcomponents';  class List extends React.Component {    render() {     return (       <React.Fragment>         <BTable           columns={columns}           {...this.props}         />       </React.Fragment>     );   } }  export default List;

2. 写我们的页面模板，完成创建和查询的操作。我们这次用了BTable.Search和BTabLe.Create来快速完成我们的查询和创建

   import { BTable } from 'bcomponents'; import { Row, Col, Input, Form } from 'antd'; import ListTable from './_components/list';  const Search = BTable.Search; const Create = BTable.Create; const FormItem = Form.Item;  @BTable.tableEffectHoc({   url: '/api/table/list',   BTable: ListTable, }) class BasicTable extends React.Component {    render() {     const {getData} = this.props;     return (       <React.Fragment>         <Row justify='space-between' style={{ marginBottom: '20px' }}>           <Col span={12}>             <Search getData={getData} />           </Col>           <Col span={12} style={{textAlign: 'right'}}>             <Create               url='/api/table'               getData={getData}             >               {                 ({getFieldDecorator}) => (                   <React.Fragment>                     <FormItem {...formItemLayout} label="名称">                       {getFieldDecorator('name', {                         initialValue: '',                         validateFirst: true,                         rules: [                           formValid.require(),                           formValid.name(),                         ],                       })(                         <Input placeholder="请输入渠道" />                       )}                     </FormItem>                   </React.Fragment>                 )               }