时间戳

首页 > 解决方案 > 从 Consumer -> Provider 上下文传递 prop 并在 Provider 渲染之外访问它？

javascript - 从 Consumer -> Provider 上下文传递 prop 并在 Provider 渲染之外访问它？

问题描述

我有一个名为“主页”的组件，它是我网站的主页。这个 Home 组件使用名为“ProductContext”的上下文来访问 data.js 文件中的所有产品。问题是，我的网站的每个页面都将有多个 *data.js 文件，所以我去告诉上下文文件“我在”哪个页面，以便它访问相应的 *data.js 文件。

“家”组件：

class Home extends Component {
  state = {
    page: "Home",
  };

  componentDidMount() {}

  render() {
    return (
      <React.Fragment>
        <div className="py-2">
          <div className="container-fluid">
            <Title title="PRODUCTS" className="pl-5" />
            <div
              className="row no-gutters "
              style={{ justifyContent: "center" }}
            >
              <ProductConsumer page={"Home"}>
                {(value) => {
                  console.log(value);
                  return value.products.map((product) => {
                    return <Product key={product.id} product={product} />;
                  });
                }}
              </ProductConsumer>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Home;

产品上下文：

render() {
    return (
      <ProductContext.Provider
        value={{
          ...this.state,
          handleDetail: this.handleDetail,
          addToCart: this.addToCart,
          openModal: this.openModal,
          closeModal: this.closeModal,
          increment: this.increment,
          decrement: this.decrement,
          removeItem: this.removeItem,
          clearCart: this.clearCart,
          setPage: this.setPage,
        }}
      >
        {this.props.children}
      </ProductContext.Provider>
    );
  }
}

你可以看出我尝试了一些方法，比如通过 props 或上下文中的函数传递它。我确定我很接近，但我不知道该怎么做。我已经看到了调用 Provider 函数的其他示例，最常见的是使用“onClick”，但这需要在构建或安装 Home 组件或 ProductContext 时发生，以便 Page 组件可以提取正确的数据。我的意思是说：

//In Home Component

componentDidMount() {
   let context = this.context;
   context.setPage("Home");

}

当然，这不起作用。

标签： javascriptreactjs

解决方案

我对上下文如何工作的理解非常有限。从这次经历中，我想我了解到上下文应该被视为提供数据的东西，而不是获取数据的东西。

我解决了这个问题，首先将上下文中的数据排序到不同的数组中，然后将相应的数组传递给每个页面。

推荐阅读