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

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}

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

我尝试在我的页面组件中做类似 <Navbar {...selected} /> 的事情，我通常会如何传递 props 但没有成功。

Answer 1

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

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

Answer 2

你可以这样做：

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

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

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

Passing state from one component to another with React language switch

javascript

components

state

reactjs

react-props