ReactJS中的多个上下文

Question

对于我的网上商店，我需要使用3个React Context：

• 检查用户的身份验证上下文，然后保存 boolean isAuth处于状态，并且具有登录和注销功能。
• 收藏的产品上下文
• 购物车上下文

最喜欢的产品上下文和购物车上下文也需要使用身份验证上下文，因为未经身份验证的用户可以向< em>购物车，然后点击“签出”即可注册。

其他页面和组件也需要访问这些上下文。

在购物车上下文中使用身份验证上下文的原因是，如果用户通过了身份验证，则购物车存储在数据库中；如果用户未通过身份验证，则购物车存储在cookie（或状态）中

问题是Context Consumer仅在render()中可用，但是我需要在 lifecycle函数中使用上下文，例如ComponentDidMount()和我自己的函数。

最近我找到了npm-library中的“ <-em> ”。我认为它可以解决问题。

结合所有这些上下文的正确方法是什么？

Answer 1

您需要这样的东西：

class B{

}

const A = props => (
    <Consumer>
        {context => <B {...props} context={context} />}
    </Consumer>
);

export default A;

所有B类的生命周期方法都将访问上下文