从类组件更新 Reacts 上下文值答案

【问题标题】：Updating Reacts Context values from Class Components从类组件更新 Reacts 上下文值
【发布时间】：2020-08-10 06:34:48
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-native react-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>
);
  }
}

【讨论】：