# decorator-react

> react+antd扩展

Latest version **2.0.1** (published 2020-08-10) · ISC license · 0 weekly downloads

## Install

```sh
npm install decorator-react
pnpm add decorator-react
yarn add decorator-react
bun add decorator-react
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.1 |
| Published | 2020-08-10 |
| First published | 2019-07-12 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | larry |
| Maintainers | larry-wz |

## Links

- npm: https://www.npmjs.com/package/decorator-react
- npm.io page: https://npm.io/package/decorator-react

## Recent versions

- 2.0.1 (latest) — 2020-08-10
- 2.0.0 — 2020-06-25
- 1.0.7 — 2019-07-15
- 1.0.5 — 2019-07-12
- 1.0.3 — 2019-07-12
- 1.0.2 — 2019-07-12
- 1.0.1 — 2019-07-12

## README

## 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,有问题可以直接发送邮件到          `shmilylp9314wz@163.com`

---
_Source: https://npm.io/package/decorator-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._