react+dva+antd -- 创建一个新页面需要做以下步骤dva-example-user-dashboard

╰+哭是因爲堅強的太久メ 2022-05-31 12:23 135阅读 0赞

创建一个新页面需要做以下步骤

**        1.** 在/src/models/中以模块名(小写)建立一个model**  注册model及命名空间**

export default {
      namespace: 'users',
      state: {
      },
      reducers: {
      },
      effects: {
      },
      //监听, 当进入这一页的时候
      subscriptions: {
      },
    };

2.在src/router.js添加一个路由  **注册路由**

{
          path: '/deal',
          name: 'DealPage',
          getComponent(nextState, cb) {
            require.ensure([], (require) => {
            //  registerModel(app, require('./models/deal'));  //获得模块
              cb(null, require('./routes/Deal'));
            });
          },
        },

3.在src/routes/文件加中建立一个页面, 注意这里需要connect ,  **  与导航栏等拼和**

import React from 'react';
    import { connect } from 'dva';
    import styles from './Users.css';
    import UsersComponent from '../components/Users/Users';			//在这里引入User组件
    import MainLayout from '../components/MainLayout/MainLayout';	
    //引入布局组件, 布局中会组合头部导航栏和这个children组件, 加起来就是完整的一个User页了
    
    function Users({ location }) {
    	return (
    		<MainLayout location={location}>
    			<div className={styles.normal}>
    				<UsersComponent />
    			</div>
    		</MainLayout>
    	);
    }
    
    export default connect()(Users);
    //这里导出, 交给路由页

4.在src/components/下建立一个一模块命名(大写字母开头)的文件夹  **构建UI组件**

在文件夹中添加模块UI部分,  模块UI.js + 模块UI.css

如果需要想组件中传递数据, 则需要mapStateToProps(state)函数, 这里的Users是一个命名空间

function mapStateToProps(state) {
      const { list, total, page } = state.users;  //获取大的state树中的users
      return {
        loading: state.loading.models.users,
        list,
        total,
        page,
      };
    }

使用类继承方式, 并且再此与model绑定

export default connect(mapStateToProps)(Users);