react新建页面步骤(新手必看)

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-08-03 03:55:13

react新建页面步骤(新手必看)的相关文章

网赚新手必看

一.什么是网络赚钱?我们知道,今天是IT时代,电脑和网路几乎深入到人们生活的各个领域.我们上网,那些供我们浏览的网站,靠什么赚钱呢?如果不能赚钱,他们花费财力.物力做这些网页做什么?他们做这些当然是有收入的,而且收入一定要大于成本,这样他们才能赚钱,才能开下去.那么他们的收入从哪里来呢?广告啦!是广告商在出钱支持他们!现在你该明白为什么你常常打开一个网页,同时会有一个或几个网页(广告)跟着出来了,这是那些网站开下去的经济支柱啊!如果一个网站(广告商)建立后,很少有人访问,那么他的广告收入也不会高

[转]Web.config配置文件详解(新手必看)

本文转自:http://www.cnblogs.com/gaoweipeng/archive/2009/05/17/1458762.html 花了点时间整理了一下ASP.NET Web.config配置文件的基本使用方法.很适合新手参看,由于Web.config在使用很灵活,可以自定义一些节点.所以这里只介绍一些比较常用的节点. <?xml version="1.0"?> <!--注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置.可以

学编程新手必看文章

1.把C++当成一门新的语言学习(和C没啥关系!真的.): 2.看<Thinking In C++>,不要看<C++变成死相>: 3.看<The C++ Programming Language>和<Inside The C++ Object Model>,不要因为他们很难而我们自己是初学者所以就不看: 4.不要被VC.BCB.BC.MC.TC等词汇所迷惑--他们都是集成开发环境,而我们要学的是一门语言: 5.不要放过任何一个看上去很简单的小编程问题--他们

新手必看,给Linux初学者的建议!

给嵌入式linux初学者的建议                                                    目前,Linux作为嵌入式系统的主力军,广泛应用于消费类电子.工业控制.军工电子.电信/网络/通讯.航空航天.汽车电子.医疗设备.仪器仪表等相关行业.随着嵌入式行业的迅猛发展,嵌入式Linux凭借其系统发展的成熟度.市场应用的高份额也受到更多工程师朋友的青睐,越来越多的企业和研发机构都转向嵌入式Linux的开发和研究,这使得嵌入式Linux在新兴的嵌入式操作系统领

新手必看】Highcharts的100个基础问答

新手必看]Highcharts的100个基础问答 2014-12-2 10:59| 发布者: Mr.Zhang| 查看: 2749| 评论: 3|来自: Highcharts中文论坛 摘要: 1.图表中的 highcharts.com 怎么去掉? 答:通过设置 credits.eneable = false 即可,即credits: { enabled:false} 为了方便说明,先贴出Highcharts主要组成部分的说明图 图1:highcharts主要组成部分 图中名字解释: Title

Activity的生命周期收藏备用,新手必看

Android官方文档里对Activity的生命周期有比较详尽的描述,但由于资源回收机制带来不确定性,我们的程序运行结果常常与预期的不符,而调试这类问题又十分消耗时间和精力.解决的根本办法还是要理解透Activity的生命周期及相关内容,这篇帖子着重介绍Activity生命周期本身,之后会用一两篇帖子来介绍如何处理异常的状态变化. 下图是官方文档里的Activity生命周期图,其中彩色标出的四个框是Activity的四种状态,当Activity的状态改变时会触发一个或多个onXXX()方法. o

React 系列文章(1): npm 手动搭建React 运行实例 (新手必看)

摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果不知道webpack是啥?请 看这里. 3.如果你还没有装npm 看这里. 目 录 一.webpack+react 运行实例. 二.webpack 运行环境配置分析. 三.如何手动搭建一个webpack+react 运行环境. 一.webpack+react 运行实例 1.实例代码 源代码下载地址:

IOS-上架APP之启动页设置(新手必看!)

今天自己做的小作品准备提交,就差一个启动页,各种百度,各种搜,结果还好最后终于出来了,和大家分享一下,这个过程中遇到的各种小问题.(注XCode版本为7.2) 1.启动页一般都是图片,因为苹果有4,4S,5,5S,6,6S可能以后还会有其他的型号,所以要考虑到屏幕的适配,还有系统的适配(有些用户的系统版本不支持一些技术,比如LaunchScreen.storyboard),也就是图片的大小,那么多大的图片呢,图片的大小是可以在XCode里找到的(当时各种百度,各种搜大,答案也是众说纷纭,所以看过

nginx 配置详解(新手必看)

内容来源:http://blog.csdn.net/david_xtd/article/details/16967837 译者注:不知道其他开发者是否和我一样,参与或者写了很多Web项目,但是却没有真正的去完整的部署应用,很多时候都是交给ops即运维的同学帮忙来做.而作为一个有节操的开发者,我认为了解一些服务器方面的知识是很有必要的,读了这篇文章之后,自己对nginx也有了一个初步的认识,对自己很有帮助,不敢独享,遂译之. 如果你是一名Web开发人员,那么你很有可能听过nginx(读音听起来像e