如何在不同的组件中共享useState

Question

我按照 youtube 上的教程 (https://www.youtube.com/watch?v=mmCnx0YnBs4&t=265s&ab_channel=TravelsCode) 在我的应用程序中创建了一个翻译器。

我正在尝试在另一个组件中使用它：

languagePicker.js

import React, { useState } from "react";
import translate from "./i18n/translate";
import { I18Provider, LOCALES } from "./i18n";
import { useBetween } from "use-between";

import App from "../App";

const LanguagePicker = (props) => {
  const { locale, setLocale } = useBetween(App);
  return (
    <I18Provider locale={locale}>
       <div>
            <button onClick={() => setLocale(LOCALES.ITALIAN)}>italian</button>
            <button onClick={() => setLocale(LOCALES.ENGLISH)}>english</button>
            <button onClick={() => setLocale(LOCALES.GERMAN)}>german</button>
            <p>{translate("hello")} </p>
          </div>
    </I18Provider>
  );
};
export default LanguagePicker;

当然，在这种情况下，它只是在组件本身中更改语言。我的app.js是这样的：

const App = (props) => {
  const [locale, setLocale] = useState(LOCALES.ENGLISH);

  return (
    <I18Provider locale={locale}>
        <div>
          <Header />
          
        <Footer />
    </I18Provider>
  );
};

export default App;

我希望你能明白我在做什么；如果我使用 App.js 中的按钮，工作正常，否则将只在组件中工作。希望大家能帮帮我，谢谢

Answer 1

上下文提供者是有范围的。由于您有两个 I18Provider，一个包装您的应用程序的内容（提供对您的区域设置状态的全局访问权限），另一个在您的 LanguagePicker 上，LanguagePicker 的 I18Provider 是有范围的仅适用于它包裹的组件。

您想公开 setLocale，它可能由您的 I18Provider 库公开的 hook 提供，或者将提供者包装在上下文组件中并自己公开。

这里写了一个很好的例子Kent C Dodds: How to use React context effectively

为 i18next 提供了一个钩子：

const { i18n } = useTranslation();
i18n.changeLanguage('en-US');

Answer 2

要在组件之间共享状态，推荐的方法是使用 Context (https://reactjs.org/docs/context.html)

简而言之，创建一个 js 文件，并在其中导出 React.createContext()

export const LangContext = React.createContext()

然后将您的应用程序包装在提供程序中

<LangContext.Provider value={}>{children}</LangContext.Provider>

然后通过获取组件中的上下文从上下文中抓取状态

const context = React.useContext(LangContext)

如何在不同的组件中共享useState

How to share useState in different components

i18next

reactjs

react-hooks