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> ) }
以上寫法參考了網友的寫法 謝謝!給我 了啓發。