小编典典

如何从子组件内部更新React Context?

reactjs

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

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

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

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

export default LanguageProvider;

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

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

我的页面具有切换语言的组件

<MyPage>
  <LanguageSwitcher/>
</MyPage>

LanguageSwitcher 在这种MyPage情况下,需要更新上下文以将语言更改为“ jp”,如下所示

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组件内部更新上下文?


阅读 1348

收藏
2020-07-22

共1个答案

小编典典

使用挂钩

挂钩是在16.8.0中引入的,因此以下代码要求最低版本为16.8.0(向下滚动以获得类组件示例)。CodeSandbox演示

1.为动态上下文设置父状态

首先,为了拥有可以传递给消费者的动态上下文,我将使用父级的状态。这样可以确保我拥有单一的真理来源。例如,我的父应用程序将如下所示:

const App = () => {
  const [language, setLanguage] = useState("en");
  const value = { language, setLanguage };

  return (
    ...
  );
};

language被存储在状态。稍后,我们将通过上下文同时传递language和setter函数setLanguage

2.创建上下文

接下来,我创建了这样的语言上下文:

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

在这里,我为language(’en’)设置了默认值,并设置了一个setLanguage将由上下文提供程序发送给使用者的函数。这些只是默认值,在父级中使用提供程序组件时,我将提供其值App

注意:LanguageContext无论您是否保持相同

3.创建上下文使用者

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

const LanguageSwitcher = () => {
  const { language, setLanguage } = useContext(LanguageContext);
  return (
    <button onClick={() => setLanguage("jp")}>
      Switch Language (Current: {language})
    </button>
  );
};

在这里,我只是将语言设置为“ jp”,但是您可能有自己的逻辑来设置语言。

4.将消费者包装在提供者中

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

const App = () => {
  const [language, setLanguage] = useState("en");
  const value = { language, setLanguage };

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

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

CodeSandbox演示

使用类组件

在React
16.3中引入了最新的上下文API,它提供了一种具有动态上下文的好方法。以下代码要求最低版本为16.3.0。CodeSandbox演示

1.为动态上下文设置父状态

首先,为了拥有可以传递给消费者的动态上下文,我将使用父级的状态。这样可以确保我拥有单一的真理来源。例如,我的父应用程序将如下所示:

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

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

  ...
}

language其与语言设置器方法一起存储在状态中,您可以将其保留在状态树之外。

2.创建上下文

接下来,我创建了这样的语言上下文:

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

在这里,我为language(’en’)设置了默认值,并设置了一个setLanguage将由上下文提供程序发送给使用者的函数。这些只是默认值,在父级中使用提供程序组件时,我将提供其值App

3.创建上下文使用者

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

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

在这里,我只是将语言设置为“ jp”,但是您可能有自己的逻辑来设置语言。

4.将消费者包装在提供者中

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

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

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

CodeSandbox演示

2020-07-22