Question

我正在使用react-redux使我的应用程序中的数据流更加流畅。在我的LoginPage组件中，为简单起见，我使用了纯组件。

const LoginPage = ({ auth, doLogin, doLogout }) => (

    <div>
      <NavBar auth={auth}/>
        <div className="row">
            <div style={{display: 'flex', justifyContent: 'center'}} className="col-md-4 col-md-offset-4">
                <LoginForm auth={auth} doLogin={doLogin} doLogout={doLogout}/>
            </div>
        </div>
      </div>

);

// Connects state to the props of this component
const mapStateToProps = state => ({
  auth: state.auth,
});

// Return a NEW component that is connected to the Store
export default connect(mapStateToProps, { doLogin, doLogout })(LoginPage);

这完全符合我的预期，但是我尝试更改格式以不使用纯组件，因为我想进行条件渲染（登录时显示不同的组件）。

现在看起来如下：

const LoginComponent = ({ auth, doLogin, doLogout }) => (

    <div>
      <NavBar auth={auth}/>
        <div className="row">
            <div style={{display: 'flex', justifyContent: 'center'}} className="col-md-4 col-md-offset-4">
                <LoginForm auth={auth} doLogin={doLogin} doLogout={doLogout}/>
            </div>
        </div>
      </div>

);

class LoginPage extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <LoginComponent/>
        )
    }
}

我将LoginPage更改为LoginComponent，并尝试在实际的React组件中渲染LoginComponent。

但是，这给我一个错误，说Cannot read property 'isLoggedIn' of undefined。 isLoggedIn是auth的元素。

在我的第一个示例中，我可以通过执行auth来传递const LoginPage = ({ auth, doLogin, doLogout })，但是当我转到第二个示例时，不确定如何传递auth。

我该怎么做？

Answer 1

像将其他任何React组件一样，将props传递给无状态的功能组件。目前道具没有传递给LoginComponent，因此它们将始终为undefined。

class LoginPage extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <LoginComponent
              auth={this.props.auth}
              doLogin={this.props.doLogin}
              doLogout={this.props.doLogout}
            />
        )
    }
}

将Redux状态传递给React组件

1 个答案: