Question

这是我第一次将Reactjs与Laravel结合使用。我正在尝试在组件之间发送数据，但是上下文返回为未定义。我想将数据从Product_Detail.js发送到Cart.js

globalContext.js

import React from "react";

export const MContext = React.createContext(); //exporting context object

export class MyProvider extends React.Component {
  constructor() {
    this.state = {
      message: ""
    };
  }
  render() {
    return (
      <MContext.Provider value={{ message: "kkk" }}>
        <Cart />
        <Product_Detail />
        {this.props.children} //this indicates that all the child tags with
        MyProvider as Parent can access the global store.
      </MContext.Provider>
    );
  }
}

export const MyConsumer = MContext.Consumer;

Cart.js

import { MyConsumer } from "./globalContext";

<MyConsumer>{context => <p>{console.log("CCC", context)}</p>}</MyConsumer>;

export default Cart;

if (document.getElementById("shoppingCart")) {
  ReactDOM.render(<Cart />, document.getElementById("shoppingCart"));
}

Product_Detail.js

import { MyConsumer } from "./globalContext";

<MyConsumer>
  {context => (
    <button
      className="flex-c-m sizefull bg1 bo-rad-23 hov1 s-text1 trans-0-4"
      onClick={() => {
        console.log("kkkk", context);
      }}
    >
      Add to Cart
    </button>
  )}
</MyConsumer>;
export default Product_Detail;

if (document.getElementById("product_detail")) {
  ReactDOM.render(
    <Product_Detail />,
    document.getElementById("product_detail")
  );
}

App.js

import Cart from "./components/Website/Cart";
import Product_Detail from "./components/Website/Product_Detail";
import { MyProvider } from "./components/Website/globalContext";

Answer 1

尚不清楚您在应用程序组件内部呈现的内容，但我认为出了问题是Provider没有正确包装您的组件。

您的App组件应如下所示：

import React from "react";
import Cart from "./components/Website/Cart";
import Product_Detail from "./components/Website/Product_Detail";
import { MyProvider } from "./components/Website/globalContext";

const App = () => {
  return (
    <MyProvider>
      <Cart />
      <Product_Detail />
    </MyProvider>
  );
};

export default App;

您的globalContext如下：

import React from "react";

export const MContext = React.createContext(); //exporting context object

export class MyProvider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      message: ""
    };
  }
  render() {
    return (
      <MContext.Provider value={{ message: "kkk" }}>
        {this.props.children}
      </MContext.Provider>
    );
  }
}

export const MyConsumer = MContext.Consumer;

这样，在呈现value以及单击由Cart呈现的按钮时，您传递给提供商的Product_Detail就会注销。

我还假设您正在Cart和Product_Detail组件内部导入React，并且您正确定义了这些组件。

反应上下文未定义

1 个答案: