React在模式中单击按钮后更改背景颜色

Question

我是React的新手。我正在做一个项目，假设有两页，a页和B页。在每一页中，我都放了一个名为background-modal的模态，它有3个颜色按钮(红色、绿色和蓝色(。我想实现的是，每次我打开模态并单击其中一个按钮时，页面的背景将与按钮的颜色相同(我单击了蓝色按钮，页面A和B的背景也将为蓝色(。我读过一些参考资料，其中说我可以使用上下文API或redux来实现它，但我不确定应该使用哪种方式。有什么建议和参考可以让我实现目标吗？这是我的项目结构：

App.js

<App>
<Page1 />
<Page2 />
</App>

Page1.js:

<div>
<modal />
</div>

Page2.js:

<div>
<modal />
</div>

Modal.js:

<div>
<button red />
<button green />
<button blue />
</div>

Answer 1

为此，我认为本地存储是最好的选择，因为在选择任何颜色后，如果重新加载页面，则所选颜色将消失。您可以尝试将颜色保存在本地存储中，并从中设置颜色。

localStorage.setItem("color", "red"); // set color like this
localStorage.getItem("color")??'red'; // get color from localstorage if color not found then set defult one.