javascript - ReactJS 中的多个上下文

Question

对于我的网上商店，我需要使用 3 个 React 上下文:

• 身份验证上下文，用于检查用户是否已通过身份验证，然后保存 boolean isAuth 状态，具有登录、注销功能。
• 最喜欢的产品背景
• 购物车上下文

此外，收藏夹产品上下文和购物车上下文需要使用身份验证上下文，因为未经身份验证的用户能够将产品添加到< em>购物车，然后点击“结账”即可注册。

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

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

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

最近我发现了“with-context”npm-library，我认为它可以解决问题。

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

Answer 1

你需要这样的东西:

class B{

}

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

export default A;

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