0

我正在使用现有的 JSP 页面中呈现我的反应组件

ReactDOM.render(
      React.createElement(MyReactComponents.myReactComponent, {
        props
      }),
  document.querySelector("#id")
);

反应组件如下：

import MyStore from "./MyStore";
const MyReactComponent: React.FC<any> = (props: any) => {
      const store = useContext(MyStore);
      store.myFunction();
      ---code---
}

而MyStore如下：

export class MyStore{
      ---Code---
}
export default createContext(new MyStore());

但我收到了这个错误： 在此处输入图像描述

还有一件需要注意的重要事情是，当我尝试在另一个现有的反应组件之上渲染这个反应组件时，我没有收到任何错误并且一切正常。

有人可以解释一下可能导致问题的原因吗？

4

1 回答 1

0

我不确定，但也许你误用了useContext钩子？

每当你在一个组件Child中使用它时，它的父组件中至少有一个必须调用<Context>.Provider，以便它在树中被初始化。

MyReactComponent在您的示例中，您使用: 进行渲染ReactDOM.render，因此，我想MyReactComponent是您树中的第一个组件。如果是这种情况，当您useContext在其中使用时，它找不到任何MyStore上下文。

因此，您可能只需要MyReactComponent使用上下文提供程序包装您的内容。

export class MyStore { ... }
export const MyStoreContext = createContext(new MyStore());

---

ReactDOM.render(
    <MyStoreContext.Provider>
        <MyReactComponent {...props />
    </MyStoreContext.Provider>
, document.querySelector("#id"));

然后，在里面MyReactComponent，你可以使用const store = useContext(MyStoreContext);.

于 2020-05-08T09:35:04.853 回答