如何从子组件内部更新React Context？ [英] How to update React Context from inside a child component?

问题描述

我在上下文中有语言设置，如下所示

I have the language settings in the context as like below

class LanguageProvider extends Component {
  static childContextTypes = {
    langConfig: PropTypes.object,
  };

  getChildContext() {
    return { langConfig: 'en' };
  }

  render() {
    return this.props.children;
  }
}

export default LanguageProvider;

我的应用程序代码如下所示

My application code will be something like below

<LanguageProvider>
  <App>
    <MyPage />
  </App>
</LanguageProvider>

我的页面有一个用于切换语言的组件

My Page is having a component to switch the language

<MyPage>
  <LanguageSwitcher/>
</MyPage>

LanguageSwitcher 在此 MyPage 需要更新上下文以将语言更改为'jp'，如下所示

LanguageSwitcher in this MyPage need to update the context to change the language into 'jp' as below

class LanguageSwitcher extends Component {
  static contextTypes = {
    langConfig: PropTypes.object,
  };

  updateLanguage() {
    //Here I need to update the langConfig to 'jp' 
  }

  render() {
    return <button onClick={this.updateLanguage}>Change Language</button>;
  }
}

export default LanguageSwitcher;

如何从LanguageSwitcher组件内部更新上下文？

How can I update the context from inside the LanguageSwitcher component ?

推荐答案

注意：我正在使用最新的上下文API 截至目前使用React 16.3，它提供了一种拥有动态上下文的好方法。 CodeSandbox演示

Note: I'm using the latest context API as of now using React 16.3 which provides a great way of having a dynamic context. CodeSandbox Demo

首先，为了获得可以传递给消费者的动态上下文，我将使用父状态。这确保我有一个单一的真理来源。例如，我的父App将如下所示：

Firstly, in order to have a dynamic context which can be passed to the consumers, I'll use the parent's state. This ensures that I've a single source of truth going forth. For example, my parent App will look like this:

class App extends Component {
  setLanguage = language => {
    this.setState({ language });
  };

  state = {
    language: "en",
    setLanguage: this.setLanguage
  };

  ...
}

language 与语言setter方法一起存储在状态中，您可以将其保存在状态树之外。

The language is stored in the state along with a language setter method, which you may keep outside the state tree.

接下来，我创建了一个这样的语言上下文：

Next, I created a language context like this:

// set the defaults
const LanguageContext = React.createContext({
  language: "en",
  setLanguage: () => {}
});

这里我设置语言的默认值（'en'）和 setLanguage 函数，它将由上下文提供程序发送给使用者。这些只是默认值，我在父 App 中使用提供程序组件时会提供它们的值。

Here I'm setting the defaults for language ('en') and a setLanguage function which will be sent by the context provider to the consumer(s). These are only defaults and I'll provide their values when using the provider component in the parent App.

为了让语言切换器设置语言，它应该可以通过上下文访问语言设置器功能。它看起来像这样：

In order to have the language switcher set the language, it should have the access to the language setter function via context. It can look something like this:

class LanguageSwitcher extends Component {
  render() {
    return (
      <LanguageContext.Consumer>
        {({ language, setLanguage }) => (
          <button onClick={() => setLanguage("jp")}>
            Switch Language (Current: {language})
          </button>
        )}
      </LanguageContext.Consumer>
    );
  }
}

这里我只是将语言设置为'jp '但你可能有自己的逻辑为此设置语言。

Here I'm just setting the language to 'jp' but you may have your own logic to set languages for this.

现在我将在 LanguageContext.Provider 中呈现我的语言切换器组件并传递在必须通过上下文发送到更深层次的任何级别的值中。以下是我的父 App 的样子：

Now I'll render my language switcher component in a LanguageContext.Provider and pass in the values which have to be sent via context to any level deeper. Here's how my parent App look like:

class App extends Component {
  setLanguage = language => {
    this.setState({ language });
  };

  state = {
    language: "en",
    setLanguage: this.setLanguage
  };

  render() {
    return (
      <LanguageContext.Provider value={this.state}>
        <h2>Current Language: {this.state.language}</h2>
        <p>Click button to change to jp</p>
        <div>
          {/* Can be nested */}
          <LanguageSwitcher />
        </div>
      </LanguageContext.Provider>
    );
  }
}

现在，只要点击语言切换器，它就会更新动态上下文。

Now, whenever the language switcher is clicked it updates the context dynamically.

CodeSandbox演示

这篇关于如何从子组件内部更新React Context？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！