Antd Pro学习中遇到connect中的疑惑

Connect传递Model中的数据给router

比如model中定义的login.js 定义了state数据,那么在router组件中怎么获取到这个数据呢？

通过connect可以传递过来，然后通过this.props就可以访问了，同样也会将dispatch(可以发送请求到model去),history方法传递过来，这样就可以通过组件传递moel保存的值了。

方法一：

import React from "react";
import {Component} from 'react';
import { connect } from "umi"; //从umi中导入connect
 
class LoginForm extends Component {
    constructor(props){
        super(props)
    }  
    render (){
        return (
            <div>
                 <p> this.props.login.status</p> //如这里就获取到了model中定义的status数据了
            </div>
        )
    }
}
const mapStateToProps = (state) =>{
    return {
        login：state.login, //这里的example表示后面用this.props.login获取state（根节点）中login命名空间（model的login.js中的state所有数据）的数据
    }
}
export default connect (mapStateToProps)(LoginForm) //通过这种方式来把model层的数据传递到当前组件了

方法二：

import React from "react";
import {Component} from 'react';
import { connect } from "umi"; //从umi中导入connect
 
class LoginForm extends Component {
    constructor(props){
        super(props)
    }  
    render (){
        return (
            <div>
                 <p> this.props.login.status</p> //如这里就获取到了model中定义的status数据了
            </div>
        )
    }
}

export default connect ({login})(LoginForm) //通过这种方式来把model层的数据传递到当前组件了

方法三：

采用Es6注解的方式

import React from "react";
import {Component} from 'react';
import { connect } from "umi"; //从umi中导入connect
 
@connect({login})
class LoginForm extends Component {
    constructor(props){
        super(props)
    }  
    render (){
        return (
            <div>
                 <p> this.props.login.status</p> //如这里就获取到了model中定义的status数据了
            </div>
        )
    }