如何从子组件内部更新React Context？_随笔

如何从子组件内部更新React Context？使用挂钩

挂钩是在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 defaultsconst 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>        {}        <LanguageSwitcher />      </div>    </LanguageContext.Provider>  );};

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

CodeSandbox演示

使用类组件

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

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