Хук createContext не работает для компонентов реакции внутри JSP

Question

Я визуализирую свой компонент реакции внутри существующей страницы 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());

Но я получаю эту ошибку:

И еще одна важная вещь, на которую следует обратить внимание, заключается в том, что когда я пытаюсь визуализировать этот компонент реакции поверх другого существующего компонента реакции, я не получаю никаких ошибок, и все работает нормально.

Может кто-нибудь объяснить мне, что может вызвать проблему?

Answer 1

Я не уверен, но, возможно, вы неправильно используете 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);.