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>
        )
    }

以上寫法參考了網友的寫法 謝謝！給我 了啓發。