6 
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>
        )
    }
}

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

4

2 回答 2

6

这是一个非常简单的createContext-method 用例并更新当前上下文值。CodeSandbox-示例

这里需要注意的重要一点，如React.js createContext-method 文档中所述，上下文值将匹配到Provider树中最接近的匹配项。

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

另请记住，如文档中所述，仅在未找到匹配的提供者时才使用默认值参数。

只有当组件在树中没有匹配的 Provider 时才使用 defaultValue 参数。这有助于在不包装组件的情况下单独测试组件。注意：将 undefined 作为 Provider 值传递不会导致消费组件使用 defaultValue。

于 2018-10-31T18:34:15.163 回答
0

目前，在 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

于 2018-12-30T16:49:54.493 回答