Reactjs 使用Redux时的条件渲染（纯组件和非纯组件）？ constloginpage=（{auth，doLogin，doLogout}）=>( ); //将状态连接到此组件的道具 常量mapStateToProps=状态=>({ auth:state.auth， }); //返回连接到存储的新组件 导出默认连接（mapstatetops，{doLogin，doLogout}）（LoginPage）；

上面是名为

LoginPage

的组件的代码。 它在全局状态下通过

auth

和两个动作

doLogin

和

doLogout

。

LoginForm

处理用户身份验证，但我想放置另一个名为

Dashboad

的组件，并根据

auth

的状态有条件地呈现它

但是，我不知道如何在纯组件中有条件地渲染

我可以转换为非纯组件，但我不知道如何将

auth

、

doLogin

和

doLogout

传递到非纯组件

---

请提供帮助。

在纯组件中，您几乎可以在非纯组件中执行所有操作，除了纯组件通过自身反应自动执行shouldComponentUpdate，以避免基于状态和道具的肤浅差异而进行不必要的重新渲染

---

如果您想有条件地呈现dashboard，可以从redux检查身份验证状态，并使用

this.props.history.push（“/dashboard”）

或

要导航到仪表板组件

那么如何在上面的示例中执行条件渲染？您应该将上述组件从功能组件更改为

组件

或

纯组件

，并且在组件DidMount或组件WillReceiveProps中，您可以检查authStatus，并使用历史记录或重定向导航到仪表板

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