使用 React 语言切换将 state 从一个组件传递到另一个组件

Question

我正在用无头 CMS 翻译我的 React 应用程序。 我的导航栏中有一个语言切换器，每个组件都必须是指定的语言。

语言切换器逻辑：

const [selected, setSelected] = useState('en-us');

const handleEnglish = () => {
    cookies.set('chosenLang', 'en-us');
    setSelected('en-us');
};

<button onClick={handleEnglish}>EN</button>

const handleFrench = () => {
    cookies.set('chosenLang', 'fr-fr');
    setSelected('fr-fr');
};

<button onClick={handleFrench}>FR</button>

以及识别语言所基于的组件中的逻辑（非常简单）：

{lang: selected}

这可行，但只是因为语言切换器与已翻译组件位于同一文件中。 一旦我为导航栏创建了单独的组件（语言开关在哪里），它就不起作用了，我不知道如何将它的 state 传递给其他组件）

我尝试在我的页面组件中执行诸如<Navbar {...selected} />之类的操作，我通常会如何传递道具，但没有运气。

Answer 1

只需使用上下文 API，所选语言 state 仅在该组件中本地可用。

https://reactjs.org/docs/context.html#when-to-use-context

Answer 2

你可以这样做：

https://codesandbox.io/s/languagecontext-example-t33pm

您可以上下文或 redux、react-redux 在应用程序的组件之间共享 state。