如何在使用useContext挂钩时访问提供程序值

Question

import React, { useContext } from 'react'
import { MyContext, MyProvider } from './Context'
const MasterContainer  = () =>{
const ctx = useContext(MyContext)
return (
<MyProvider>
{ctx}
<MyContext.Consumer>
{context=><div>{context.age}</div>}
</MyContext.Consumer>  
</MyProvider>
)
}
export default MasterContainer

当我真的想拉ctx.age 时，ctx现在正在返回undefined

import React from 'react'

export const MyContext = React.createContext("dude")
export class MyProvider extends React.Component{
state = {
name: 'Hello',
age: 12
}
render(){
return (
<MyContext.Provider value={this.state}>
{this.props.children}
</MyContext.Provider>
)
}
}

基本上，我想使用钩子访问我的提供者中的状态值，我该怎么做？

Answer 1

这里是createContext方法和更新当前上下文值的一个非常简单的用例。CodeSandbox示例

这里需要注意的是，正如React.js createContext方法文档中所描述的，上下文值将与树中上面最匹配的Provider匹配。

React.createContext-创建一个Context对象。当React呈现订阅此Context对象的组件时，它将从树中最接近的匹配Provider读取当前上下文值。

请记住，正如文档中所述，只有在找不到匹配的Provider时才使用默认值参数。

defaultValue参数仅在树中组件上方没有匹配的Provider时使用。这有助于在不包装组件的情况下对组件进行隔离测试。注意：传递undefined作为Provider值不会导致使用组件使用defaultValue。

Answer 2

目前，在React 16.7.0和ReactDOM 16.7.0中，useContext似乎不起作用。对于功能组件，这对我来说很有效：

// Theme context, default to light theme
const ThemeContext = React.createContext('light');
// Signed-in user context
const UserContext = React.createContext({
name: 'Guest',
});
class App extends React.Component {
render() {
const {signedInUser, theme} = this.props;
// App component that provides initial context values
return (
<ThemeContext.Provider value={theme}>
<UserContext.Provider value={signedInUser}>
<Layout />
</UserContext.Provider>
</ThemeContext.Provider>
);
}
}
function Layout() {
return (
<div>
<Sidebar />
<Content />
</div>
);
}
// A component may consume multiple contexts
function Content() {
return (
<ThemeContext.Consumer>
{theme => (
<UserContext.Consumer>
{user => (
<ProfilePage user={user} theme={theme} />
)}
</UserContext.Consumer>
)}
</ThemeContext.Consumer>
);
}

对于基于类的组件，它甚至更简单：

import {ThemeContext} from './theme-context';
class ThemedButton extends React.Component {
render() {
let props = this.props;
let theme = this.context;
return (
<button
{...props}
style={{backgroundColor: theme.background}}
/>
);
}
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;

参考：https://reactjs.org/docs/context.html