我是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(){
// ...
}
}
答案 0 :(得分:2)
您的容器组件应该是组件,并且必须具有渲染功能以及要渲染的哑/表现组件。
padding