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.完成
当你完成以上操作页面就创建好了。
时间: 2024-10-10 22:01:47