ant design 项目实例

安装 Umi UI | 创建新应用

参考官网

---

第一步：新建路由

创建路由：

umi g page products

目录src/pages中会添加products.js和products.css两个文件

第二步：编写 UI Component

在编辑器中打开，新建src/components/ProductList.js文件

import { Table, Popconfirm, Button } from 'antd';

const ProductList = ({ onDelete, products }) => {
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
    },
    {
      title: 'Actions',
      render: (text, record) => {
        return (
          <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
            <Button>Delete</Button>
          </Popconfirm>
        );
      },
    },
  ];
  return <Table dataSource={products} columns={columns} />;
};

export default ProductList;

第三步：定义 dva Model

完成 UI 界面后，开始处理数据和逻辑

新建 model src/models/products.js

export default {
  namespace: 'products',
  state: [],
  reducers: {
    delete(state, { payload: id }) {
      return state.filter(item => item.id !== id);
    },
  },
};

说明

• namespace： 表示在全局 state 上的 key
• state：是初始值，在这里是空数组 (初始值会在 app.js中的initialState中定义)
• reducers：等同于 redux 中的 reducer，接受 action ，同步更新 state

注意

umi 中约定src/models下的model会被自动注入，无需手动注入

第四步：在 pages 文件中 connect 一下

编辑src/pages/products.js，替换为下面的内容

import { connect } from 'dva';
import ProductList from '../components/ProductList';

const Products = ({ dispatch, products }) => {
  function handleDelete(id) {
    dispatch({
      type: 'products/delete',
      payload: id,
    });
  }
  return (
    <div>
      <h2>List of Products</h2>
      <ProductList onDelete={handleDelete} products={products} />
    </div>
  );
};

export default connect(({ products }) => ({
  products,
}))(Products);

最后：定义初始数据

要让整个应用跑起来，还需要定义下初始数据

编辑src/app.js

export const dva = {
  config: {
    onError(err) {
      err.preventDefault();
      console.error(err.message);
    },
    initialState: {
      products: [{ name: 'dva', id: 1 }, { name: 'antd', id: 2 }],
    },
  },
};

---

查看页面效果，操作下页面，确认完成…