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

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

0 голосов
/ 08 мая 2020

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

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

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

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

1 Ответ

0 голосов
/ 08 мая 2020

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

...