Как получить доступ к значению провайдера при использовании ловушки useContext - PullRequest
Новая
       5

Как получить доступ к значению провайдера при использовании ловушки useContext

0 голосов
/ 31 октября 2018 
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 сейчас возвращает неопределенное значение, когда я действительно хочу вытащить ctx.age 

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

В основном я хочу получить доступ к значениям моего состояния в моем провайдере с помощью хуков, как мне это сделать?

Ответы [ 2 ]

0 голосов
/ 30 декабря 2018

В настоящее время в 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

0 голосов
/ 31 октября 2018

Вот очень простой вариант использования createContext -метода и обновления текущего значения контекста. CodeSandbox-пример

Важно отметить, что, как описано в React.js в документации метода createContext , значение контекста будет соответствовать ближайшему совпадению Provider выше в дереве.

React.createContext - Создает объект Context. Когда React рендерит компонент, который подписывается на этот объект Context, он будет читать текущее значение контекста из ближайшего соответствующего провайдера над ним в дереве.

Также имейте в виду, как указано в документации, аргумент значения по умолчанию используется только в том случае, если не найден соответствующий поставщик.

Аргумент defaultValue используется только тогда, когда у компонента нет соответствующего Провайдера над ним в дереве. Это может быть полезно для тестирования компонентов в отдельности без их переноса. Примечание. Передача undefined в качестве значения Provider не приводит к тому, что потребляющие компоненты используют defaultValue.

...