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

Posted 2023-02-23

【中文标题】使用 React 语言切换将状态从一个组件传递到另一个组件

【英文标题】：Passing state from one component to another with React language switch

【发布时间】：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，但我真的不知道是什么？这基本上就是我所拥有的。

【参考方案1】：

你可以这样做：

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

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

【参考方案2】：

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

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