Ant Design Pro 使用model

引入 DVA

export default {
  plugins: [
    ['umi-plugin-react', {
      antd: true,
      dva: true,
    }],
  ],
  // ...
}

 

新建src/models/register.js

export default {
  namespace: 'register',

  state: [
    {
      key: '1',
      name: 'John Brown111',
      age: 32,
      address: 'New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
  ],
};

• namespace 来作为一个 model 的唯一标识，state 中就是该 model 管理的数据。

 

src/pages/Request.js

import { register } from '@/services/ant-design-pro/register';
import { Button } from 'antd';
import { Divider, List, Typography } from 'antd';
import { Card } from 'antd';
import { Space, Table, Tag } from 'antd';
import React from 'react';
import { render } from 'react-dom';
import { connect } from 'dva';

const namespace = 'register';

const mapStateToProps = (state) => {
  const userList = state[namespace];
  return {
    userList,
  };
};

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },

  {
    title: 'Action',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];

@connect(mapStateToProps)
class ShoppingList extends React.Component {
  render() {
    return (
      <>
        <Card>
          <Button type="primary" onClick={register}>
            注册
          </Button>
        </Card>

        <Table columns={columns} dataSource={this.props.userList} />
      </>
    );
  }
}

export default ShoppingList;

• connect 让组件获取到两样东西：1. model 中的数据；2. 驱动 model 改变的方法。
• connect 既然是函数，就可以接受入参，第一个入参是最常用的，它需要是一个函数，我们习惯给它命名叫做 mapStateToProps，顾名思义就是把 dva model 中的 state 通过组件的 props 注入给组件。通过实现这个函数，我们就能实现把 dva model 的 state 注入给组件。