使用 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。