React:useContext,如何从外部组件中检索它?

Posted

技术标签:

【中文标题】React:useContext,如何从外部组件中检索它?【英文标题】:React: useContext, how to retrieve it from an external component? 【发布时间】:2019-07-18 01:46:06 【问题描述】:

如果我有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

我错过了什么?


编辑:基于 cmets,我使用第三个文件并导入上下文以访问它 -> 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 是未定义的,这是为什么呢?


编辑:错误是没有提供价值作为道具

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

【问题讨论】:

【参考方案1】:

最好在单独的文件中创建上下文,以便您可以导出它并在多个地方使用它,其中一个是useContext() 挂钩。当 Context 中的数据发生变化时,这无论如何都会重新渲染。

【讨论】:

【参考方案2】:

您想在组件外部使用createContext,并使用Providervalue 属性,其中包含您希望在树的下方进一步使用的数据。

示例

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>

【讨论】:

以上是关于React:useContext,如何从外部组件中检索它?的主要内容,如果未能解决你的问题,请参考以下文章

在一个 React 组件中使用多个“useContext”

如何测试组件中的react useContext useReducer调度

从 REST API 填充上下文并在带有 useEffect 和 useContext 的 React 组件中使用它

如何在类组件中使用 React.useContext(AuthContext) 来触发 index.js 文件中的条件集

React Context 和 useContext

如何测试依赖于 useContext 钩子的反应组件?