React深色模式切换仅触发一次 About组件Bootstrap样式不更新问题

修复方案 #

1. 解决切换按钮仅能触发一次的问题

Navbar组件中的深色模式切换为checkbox类型输入框，未绑定checked属性与mode状态联动，导致点击一次后选中状态和实际mode值不匹配，后续点击逻辑异常。修改Navbar.js中input标签代码：

<input 
  className="form-check-input"
  onClick={props.togglemode} 
  type="checkbox" 
  id="flexSwitchCheckDefault"
  checked={props.mode === 'dark'}
/>

2. 解决页面刷新后恢复默认浅色模式的问题

mode状态仅存储在组件内存中，页面刷新后内存清空会回到初始值，需结合localStorage做本地持久化。修改App.js代码：
首先修改state初始化逻辑，组件加载时从本地存储读取历史配置：

// 初始化时优先取本地存储的主题配置，没有则用默认浅色
const[mode, setMode] = useState(localStorage.getItem('theme') || 'light');

// 组件挂载时同步初始化页面背景色
React.useEffect(() => {
  document.body.style.backgroundColor = mode === 'dark' ? "#343a40" : "white"
}, [])

再修改togglemode方法，切换主题时同步存储到本地：

const togglemode=()=>{
  const newMode = mode === 'light' ? 'dark' : 'light'
  setMode(newMode);
  localStorage.setItem('theme', newMode)
  document.body.style.backgroundColor = newMode === 'dark' ? "#343a40" : "white"
  // 注意：原代码中showAlert方法未定义，需补全实现或暂时注释，否则会报错中断逻辑
  // showAlert(`${newMode==='dark'?'Dark':'Light'} mode has been enabled`,"success")
}

3. 解决About组件样式无法同步更新的问题

About组件内自定义样式的颜色值存在非法值，导致样式不生效：

• 浅色模式color值#04273为无效十六进制颜色（需为3/6位）
• 浅色模式backgroundColor值light不是合法CSS颜色值

修改About.js中MyStyle定义即可：

let Mystyle={
  color:props.mode==='dark'?'white':'#042743',
  backgroundColor:props.mode==='dark'?'rgb(36 74 104)':'white',
}

另外代码中存在<div classNameName="container">的笔误，多写了一个Name后缀，修改为className可消除控制台告警。

内容的提问来源于stack exchange，提问作者DigitalZeus