ReactJS 中的多个上下文答案

【问题标题】：Multiple Contexts in ReactJSReactJS 中的多个上下文
【发布时间】：2019-02-12 07:40:48
【问题描述】：

对于我的在线商店，我需要使用 3 个 React 上下文：

另外Favorite Products context和Shopping Cart context需要使用Authentication Context，因为未经身份验证的用户可以将产品添加到购物车点击“结账”后即可注册。

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

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

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

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

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

【问题讨论】：

在购物车上下文中使用身份验证上下文的原因是，如果用户通过身份验证，购物车将存储在数据库中，如果用户未通过身份验证，则存储在 cookie（或状态）中
看看这个 GitHub 问题：github.com/facebook/react/issues/12397。它有许多如何使用 Context API 的代码示例；长话短说，您应该使用 HOC 方法，即在渲染中执行上下文使用者并将适当的数据作为道具传递给组件。

【解决方案1】：

你需要这样的东西：

class B{

}

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

export default A;

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

【讨论】：