reactjs - 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 for 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 是未定义的，这是为什么？

---

编辑:错误是没有提供值(value)作为 Prop

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

Answer 1

最好在单独的文件中创建上下文，这样您就可以导出它并在多个地方使用它，其中之一是 useContext() Hook 。当 Context 中的数据发生变化时，这无论如何都会重新呈现。