React - 改变主题的方法

Question

我正在使用 React 库，我想添加更改主题的功能，它看起来很简单，有三个按钮（或单选按钮），当您单击其中一个按钮时，图片会改变，问题是实现和更新页面（让图像不消失）我想问一下实现，我该如何实现呢？创建一个状态并在一个状态内创建导入的名称，每个名称都存储图片本身？或者这是一个坏主意，最后我想知道如何做到这一点，以便在刷新页面时，更改主题后图片不会消失

Answer 1

我建议使用React Context，您可以将整个应用程序包装在ThemeProvider 中，然后任何需要对主题更改做出反应的组件都可以通过useContext 挂钩访问当前的themeName 值。这是freecode blog，关于如何使用 Context 和 CSS 模块实现您的目标。

请注意，此解决方案不会持续刷新页面，但如果有必要，可以将这 2 个解决方案结合起来。因此，当您更改主题时，localstorage 也会更新为当前主题名称。在页面加载时，您可以读取主题名称来配置Context。