时间戳

首页 > 解决方案 > ReactJS 中的多个上下文

javascript - ReactJS 中的多个上下文

问题描述

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

此外， Favorite Products 上下文和Shopping Cart 上下文需要使用Authentication Context，因为未经身份验证的用户可以将产品添加到购物车，然后在单击“结帐”后能够注册。

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

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

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

最近发现了“ with-context ”npm-library，觉得可以解决问题。

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

标签： javascriptreactjs

解决方案

你需要这样的东西：

class B{

}

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

export default A;

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

推荐阅读