我是Redux的新手,无法将自己的头放在演示和容器组件上。
相关堆栈:
问题:
我有一个登录按钮组件,该组件在呈现时会检查登录状态并调用onSuccessfulLogin
用用户的Facebook凭证更新状态的操作。
但是,当尝试将其拆分为单独的演示文稿/容器组件时,我无法调用onSuccessfulLogin操作:Error: onSuccessfulLogin is not defined
。
我在这里做错了什么?我以为有一些简单的事情我对两个组件和connect()
函数之间的关系不了解。
演示组件(Login.js)
import React, { PropTypes } from "react-native";
import FBLogin from "react-native-facebook-login";
import UserActions from "../users/UserActions";
class LoginPage extends React.Component {
render() {
const { userData, onSuccessfulLogin } = this.props;
return (
<FBLogin
permissions={["email","user_friends"]}
onLoginFound= { data => {
onSuccessfulLogin(data.credentials);
}}
/>
)
}
};
export default LoginPage;
容器组件(LoginContainer.js)
import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";
const mapDispatchToProps = (dispatch) => {
return {
onSuccessfulLogin: (userData) => {
dispatch(UserActions.userLoggedIn(userData))
}
}
}
const mapStateToProps = (state) => {
return {
userData: state.userData
}
}
const LoginContainer = connect(
mapStateToProps,
mapDispatchToProps
)(LoginPage);
export default LoginContainer;
另外,如果我想让组件state.userData
可以访问更新的LoginPage
内容,我该怎么做?任何帮助表示赞赏!
解决了!使用ES6类时,需要调用super(props)
构造函数方法才能访问所连接的演示组件中的容器属性:
class LoginPage extends React.Component {
constructor(props){
super(props);
}
render(){
// ...
}
}
您的容器组件应该是一个组件,并且必须具有要渲染的哑/演示组件的渲染功能。
import { connect } from 'react-redux';
import LoginPage from "../login/LoginPage";
import UserActions from "../users/UserActions";
class LoginContainer extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<LoginPage userData={this.props.userData}
onSuccessfulLogin={this.props.onSuccessfulLogin}
/>
)
}
};
const mapDispatchToProps = (dispatch) => {
return {
onSuccessfulLogin: (userData) => {
dispatch(UserActions.userLoggedIn(userData))
}
}
}
const mapStateToProps = (state) => {
return {
userData: state.userData
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(LoginPage);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句