从类组件更新 Reacts 上下文值

Posted 2023-04-14

【中文标题】从类组件更新 Reacts 上下文值

【英文标题】：Updating Reacts Context values from Class Components

【发布时间】：2020-08-10 06:34:48

【问题描述】：

我在 React 应用程序中有一个类组件。有用。然后我需要一个全局变量并到达 React 的上下文。我创建了 Context 并可以使用它的价值。

但是我需要更新它的值，我读了很多，似乎我必须使用 React Hooks 来更新 Context 值。但是我的组件是类组件，我不能使用钩子。

我的问题是，如果我想使用上下文，我不能使用类组件吗？现在我在学习 React 并多次遇到 Hooks。如果 hooks 很重要，这意味着我们必须一直使用函数组件？

我必须做什么？我只需要更新我的全局变量并使用它的值。

【参考方案1】：

如果我想使用上下文，我不能使用类组件？

不，您可以在类组件中使用上下文。 请参阅文档中的Context section，所有示例都带有类。

我们必须一直使用函数组件？

不，您可以使用任何您认为合适的方法。

但是，没有实际理由再使用类组件（除了实现Error Boundary）。 React officially recommends 使用 hooks 和 composition，因此最好的方法是函数组件。

我必须做什么？我只需要更新我的全局变量并使用它的值。

一个全局变量，顾名思义，它的全局到应用程序的范围（而不是像状态一样绑定到组件的范围）。您可以从任何地方对其进行更新。

const globalObject =  name: `myVar` ;

// Can be updated from any scope as you keep the reference.
const FunctionComponent = () =>  globalObject.name=`a`; return <></>; 

// Outer scope
globalObject.name=`b`;

【参考方案2】：

请访问此链接，https://www.taniarascia.com/using-context-api-in-react/ 和 How to update React Context from inside a child component?。 在这个链接中有解释，你可以这样做：

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