使用 React 语言切换将状态从一个组件传递到另一个组件答案

【问题标题】：Passing state from one component to another with React language switch使用 React 语言切换将状态从一个组件传递到另一个组件
【发布时间】：2021-08-10 12:36:21
【问题描述】：

我正在使用无头 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}

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

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

【问题讨论】：

你能告诉我们更多的代码sn-ps吗？
我当然可以@PriyankKachhela，但我真的不知道是什么？这基本上就是我所拥有的。

标签： javascript reactjs components state react-props

【解决方案1】：

你可以这样做：

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

您可以使用 context 或 redux、react-redux 在应用程序之间共享组件的状态。

【讨论】：

【解决方案2】：

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

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

【讨论】：