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
,并使用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>
【讨论】:
以上是关于React:useContext,如何从外部组件中检索它?的主要内容,如果未能解决你的问题,请参考以下文章
如何测试组件中的react useContext useReducer调度
从 REST API 填充上下文并在带有 useEffect 和 useContext 的 React 组件中使用它
如何在类组件中使用 React.useContext(AuthContext) 来触发 index.js 文件中的条件集