react新建页面步骤（新手必看）

Posted 2020-10-08 huhanhaha

react+antd新建页面步骤：

1.antd创键一个页面从routes开始

import React from ‘react‘;

import { connect } from ‘dva‘;

import UserPage from ‘../components/userPage‘              //这是链接组件的地方

function User({dispatch,location}){
    const UserPageProps ={}
    return(
        <div>
            <UserPage {...UserPageProps} />                    //首字母大写
        </div>
    )
}
export default (User)

2.然后在router.js 里面配置你的页面

import UserPage from ‘./routes/User‘        //链接你的routes
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Route path="/user" component={UserPage} />        //配置页面地址 ，链接组件
    </Router>
  );
}

3.接下来components

import React from ‘react‘;
const UserPage = ({ 这里是routes传过来数据 })=>{
    return(
        <div>
            321
        </div>
    )
}
export default UserPage;

这个时候routes就和components链接通了，页面可以呈现出来了。

4.最后routes和models链接

1.这是models页面里需要写的一些东西，test是数据

import React from ‘react‘;
export default{
    namespace:‘user‘,
    state:{
        test:{},
    },
    subscriptions:{
        setup({ dispatch, history }) {
            history.listen(location => {
                if (location.pathname === ‘/user‘) {
                dispatch({
                    type: ‘query‘,
                    payload: location.query,
                })
                }
            })
        },
    },
    effects:{
        *query({ payload }, { call, put }){
            const data = ‘胡瀚好帅‘
            yield put ({
                type:‘testSucess‘,
                payload:data,
            });
        }
    },
    reducers:{
        testSucess(state,action){
            state.test = action.payload;
            return{...state}
        }
    }
}

2.然后需要在index.js里面配置modoles

app.model(require(‘./models/user‘));

3.完成了modoles页面后还需要在routes里加链接这个modole的代码

import React from ‘react‘;
import {connect} from ‘dva‘;
import UserPage from ‘../components/userPage‘

function User({dispatch,location,user}){    //这里的user是取modoles里面的值    
    const {
       test                                    //这里是取test
    } = user
    const UserPageProps ={
        test:test                            //把test的值传到components里面
    }
    return(
        <div>
            <UserPage {...UserPageProps} />
        </div>
        
    )
}

export default connect(({user})=>({user}))(User);        //链接modoles的接口

4.这个时候链接好了，页面就可以调用数据了

import React from ‘react‘;

const UserPage = ({
    test,
})=>{
    return(
        <div>
            321
            {test}
        </div>
    )
}

export default UserPage;

5.完成

当你完成以上操作页面就创建好了。