React: useContext, как извлечь его из внешнего компонента?

Question

Если у меня в Comp1.js

const Comp1 = () => {
  const globalTheme = new createContext()
  return (
    <globalTheme.Provider globalStyle={anyVar}>
     <Layout>
      <AnotherComponent />
     </Layout>
    </globalTheme.Provider>
  )
}

А затем в layout.js

  const globalStyle = useContext(globalTheme)
  console.log(globalStyle)

я получаю globalTheme is not defined, должен ли я снова создать контекст?

  const globalTheme = new createContext()
  const globalStyle = useContext(globalTheme)
  console.log(globalStyle)

Тогда я получаю undefined для globalStyle

что мне не хватает?

---

РЕДАКТИРОВАТЬ: на основе комментариев я использую третий файл и импортируюконтекст для получения доступа к нему -> theme-context.js

import { createContext } from 'react'

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
}

export const ThemeContext = createContext(
  themes.dark // default value
)

Затем я предоставляю этот контекст в другом файле blog-template.js

import { ThemeContext } from '../context/theme-context'
import Layout from '../components/layout'

const Blog = () => {
let globalStyle = 'just any value'
return (
    <ThemeContext.Provider globalStyle={globalStyle}>
      <Layout />
    </ThemeContext.Provider>
)}

А затем в layout.js

import React, { useContext} from 'react'
import { ThemeContext } from '../context/theme-context'

const Layout = () => {
  const globalStyle = useContext(ThemeContext)
  console.log(globalStyle)
}

Но globalStyle не определено, почему это так?

---

РЕДАКТИРОВАТЬ: ошибка не состояла в том, чтобы предоставить значение как prop

-<ThemeContext.Provider globalStyle={globalStyle}>
+-<ThemeContext.Provider value={globalStyle}>

Answer 1

Лучше создать контекст в отдельном файле, чтобы вы могли экспортировать его и использовать в нескольких местах, одним из которых является useContext() ловушка.Это в любом случае будет повторно отображаться при изменении данных в контексте.

Answer 2

Вы хотите использовать createContext вне компонента и использовать Provider с реквизитом value, содержащим данные, которые вы хотите использовать далее в дереве.

Пример

const { createContext, useContext } = React;
const GlobalTheme = createContext();

const Comp1 = () => {
  const anyVar = { color: "red" };

  return (
    <GlobalTheme.Provider value={anyVar}>
      <Layout>
        <AnotherComponent />
      </Layout>
    </GlobalTheme.Provider>
  );
};

const Layout = ({ children }) => {
  const globalStyle = useContext(GlobalTheme);

  return <div style={globalStyle}>{children}</div>;
};

const AnotherComponent = () => {
  return <div> Foo </div>;
};

ReactDOM.render(<Comp1 />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>