将 Redux 状态传递给 React 组件

debugcn 发表于 Dev

黎明17

我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并尝试LoginComponent在实际的 React 组件中进行渲染。

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

在我的第一个示例中，我可以auth通过执行传入const LoginPage = ({ auth, doLogin, doLogout })，但在auth更改为第二个示例时不确定如何传入。

我怎样才能做到这一点？

罗斯艾伦

像处理任何其他 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}
            />
        )
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。