dva中的UI组件和路由组件

in 网站建设
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

路由组件:
路由组件里面是有this.props的。
路由组件:

import React, { Component } from 'react';
import UserUI from '../components/userUI'
class UserPage extends Component{
    handlerBack = () =>{
        console.log(this.props);
        this.props.history.push('/')
    }
    render(){
        return(
            <div>
                我是user页
                <button onClick={this.handlerBack}>回首页</button>
                <UserUI></UserUI>
            </div>
        )
    }
}
export default UserPage;

UI组件:
UI组件里面的this.props是空的,如果要使用的话,需要使用router提供的withRouter组件来完成,也就是要使用一个高阶组件。
UI组件栗子:

import React, { Component } from 'react'
import {withRouter} from 'dva/router'

class UserUI extends Component{
    handlerBack = () =>{
        console.log(this.props)
        this.props.history.push('/')
    }
    render(){
        return(
            <div>
                userUI组件
                <button onClick={this.handlerBack}>返回首页  ---ui</button>
            </div>
        )
    }
}

export default withRouter(UserUI);


觉得对自己有帮助就点个赞

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看