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现在返回未定义

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-example

在这里需要注意的是，如React.js createContext-method documentation中所述，上下文值将与树中最接近的匹配Provider匹配。

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

还要牢记文档中所述的内容，仅当找不到匹配的提供程序时才使用默认值参数。

仅当组件在树中上方没有匹配的Provider时才使用defaultValue参数。这对于隔离测试组件而不进行包装很有帮助。注意：将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

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

2 个答案: