在 react-redux 演示组件中使用操作时遇到问题

Question

我是 redux 的新手，无法理解展示组件和容器组件。

相关堆栈：

反应 v0.14.8
react-native v0.24.1
redux v3.5.2
react-redux v4.4.5

问题：

我有一个登录按钮组件，呈现时会检查登录状态并调用 onSuccessfulLogin 操作，该操作使用用户的 Facebook 凭据更新状态。

但是，当我试图将它分成单独的 presentational/container 组件时，我无法调用 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;

此外，如果我想让 LoginPage 组件可以访问更新后的 state.userData，我该怎么做？任何帮助表示赞赏！

已解决！ 使用 ES6 类时，需要在构造方法中调用 super(props) 才能访问容器的属性连接的演示组件：

class LoginPage extends React.Component {
    constructor(props){
        super(props);
    }

    render(){    
        // ...
    }
}

Answer 1

您的容器组件应该是一个组件并且它必须有一个 render 函数 和 dumb/presentational 组件想要渲染。

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

在 react-redux 演示组件中使用操作时遇到问题

Trouble using actions in react-redux presentational component

javascript

reactjs

react-native

redux

react-redux