Как использовать контекст с помощью хука useContext?

Question

[Ostic]

Здравствуйте.
App.tsx

const Hello = createContext<string>('Hello');

function App() {
  return (
    <Hello.Provider value='Hi'>
        <MyComponent />
    </Theme.Provider>
  );
}
export default App;

MyComponent.tsx

const MyComponent: React.FC<> = () => {
  const msg = useContext<string>(Hello);
  return (
    <span>{msg}</span>
   )
}

Пишет в компоненте:

Cannot find name 'Hello'.ts(2304)

Всё упрощено по максимуму.

Answer 1

[dev null]

переписал ответ
вот дока

HelloContext

const Hello = createContext<string>('Hello');
export default Hello;

App.tsx

import Hello from 'HelloContext';
import MyComponent from 'MyComponent';

function App() {
  return (
    <Hello.Provider value='Hi'>
        <MyComponent />
    </Hello.Provider>
  );
}
export default App;

MyComponent.tsx

import HelloContext from 'HelloContext';

const MyComponent: React.FC<> = () => {
  const msg = useContext(HelloContext );
  return (
    <span>{msg}</span>
   )
}

export default MyComponent;

P.S.
</Theme.Provider> <-- откуда Theme?

Comments

[Ostic]

ничего тогда не понял: в Provider оборачиваем и всё
в документации ничего не увидел подобного, пишут, что нужен, а про импорт ничего.
я даже не представляю...
можно пример и желательно ссылку на доки....
я вот сейчас читаю и в упор ничего подобного не вижу

[Антон Спирин]

Ostic,

в документации ничего не увидел подобного
я вот сейчас читаю и в упор ничего подобного не вижу

Вам про модульную систему ES6 надо почитать. В доках React подобные вещи не разбираются, они написаны с расчетом, что вы все это знаете.

Просто вынесите контекст в отдельный файл и импортируйте по месту использования. Если сделаете экспорт из App и импортируете в MyComponent, у вас будет циклическая зависимость.