decorator-react

decorator-react插件使用说明

---

@Table作用在class上

• Table(option) option将注入到state里面，option格式(默认不传则传入如下参数)为如下:

  {
        // 每页数量 
        pageSizes: [10, 20, 30, 50, 100],
        // 当前页取值key
        currentKey: 'current',
        // 当前页数量取值key
        sizeKey: 'size',
        // 总页数取值key
        totalKey: 'total',
        // 查询数据取值key
        recordsKey: 'recordsKey'
        // 见antd分页
        showSizeChanger: true
        showQuickJumper： true
        showTotal: Function
  }
  

  使用此注解会在组件实例上注入reset,search,addPage,updataRecord，pageChange,sizeChange方法

  • reset:配合antd框架，调用表单Form的重置方法
  • search:若组件实现了getData方法，则调用表单将页码重置为第一页，调用getData方法
  • addPage:传入一个对象，将当前分页的页码（current）和当前页的数量（pageSize）merge到传入的对象上，返回merge后的对象。
  • updataRecord:参数有两个，第一个为接口返回的数据（本插件默认后台格式如下），第二个参数为待跟新的状态名称。
  • pageChange:页码数变化后,更新分页配置并调用getData方法更新数据
  • sizeChange:每页展示条数变化后,更新分页配置并调用getData方法更新数据
  • pagination:此方法直接返回分页配置

@InitState(key)作用在组件state上

• @InitState(key,key1,key2,...) ,key为state字段名称,demo如下

  @Table()
  class Demo extends React.Component {
  
      constructor() {
        
          @InitState('tableData','editPage')
          this.state = {
            tableData: [], //表格中的数据
            editPage: {
                show: false,
                title: '测试'
            }
          };
      }
  
      async componentDidMounted(){
  
          const data = ....;
          this.addPage(data); // 在data上添加分页的配置
          const res = ....; //接口返回的数据
          this.updataRecord(res, 'tableData'); // 更新state中的tableData数据
      }
  
      getData() {
        //请求数据接口
      }
  }
  

• @InitState会自动注入 resetEditPage方法，并且绑定了this上下文，用户可直接调用resetEditPage方法将state.editPage重置为初始值

---

欢迎提出各种bug,有问题可以直接发送邮件到 [e-mail]