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

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