Question

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

上面是称为LoginPage的组件的代码。它以全局状态auth和两个动作doLogin和doLogout传递。 LoginForm处理用户身份验证，但是我想放置另一个名为Dashboad的组件，并根据auth的状态有条件地对其进行呈现。

但是，我不确定如何有条件地渲染纯组件。

我可以更改为非纯组件，但是然后我不确定如何将auth，doLogin和doLogout传递给非纯组件。

请帮助。

Answer 1

您几乎可以在纯组件中的非纯组件中完成所有操作，只是PureComponent会自动做出应有的体力，从而自动进行shouldComponentUpdate的反应，从而避免基于状态和props的浅层差异而不必要的重新渲染。

如果要有条件地呈现仪表板，则可以从redux检查身份验证状态，并使用this.props.history.push("/dashboard")或<Redirect to="/dashboard">导航到仪表板组件

使用Redux（纯组件和非纯组件）时的条件渲染？

1 个答案: