React实现点击模态框按钮同步修改多页面背景颜色

方案选择建议 #

• 你的需求仅涉及**单一全局状态（背景色）**的跨组件共享，Context API是最优选择：它是React内置的状态管理方案，轻量、无需额外安装依赖，学习成本低，完全能满足当前需求。
• Redux更适合大型复杂应用（比如存在多模块状态交互、大量全局状态需要管理的场景），当前用Redux会有点“杀鸡用牛刀”，增加不必要的复杂度。

Context API 具体实现步骤 #

1. 创建颜色上下文（ColorContext.js） #

import { createContext, useContext, useState } from 'react';

// 创建上下文
const ColorContext = createContext();

// 自定义Provider组件，封装状态和修改方法
export function ColorProvider({ children }) {
  // 初始化背景色状态，默认设为白色
  const [bgColor, setBgColor] = useState('white');

  // 修改背景色的方法
  const changeBgColor = (color) => {
    setBgColor(color);
  };

  return (
    <ColorContext.Provider value={{ bgColor, changeBgColor }}>
      {children}
    </ColorContext.Provider>
  );
}

// 自定义Hook，简化Context消费
export function useColor() {
  return useContext(ColorContext);
}

2. 修改App.js，用Provider包裹页面组件 #

import { ColorProvider } from './ColorContext';
import Page1 from './Page1';
import Page2 from './Page2';

function App() {
  return (
    <ColorProvider>
      <Page1 />
      <Page2 />
    </ColorProvider>
  );
}

export default App;

3. 修改Page1.js和Page2.js，消费Context设置背景色 #

以Page1为例，Page2逻辑完全一致：

import { useColor } from './ColorContext';
import Modal from './Modal';

function Page1() {
  const { bgColor } = useColor();
  return (
    <div style={{ backgroundColor: bgColor, minHeight: '100vh', padding: '20px' }}>
      <h2>Page1</h2>
      <Modal />
    </div>
  );
}

export default Page1;

4. 修改Modal.js，添加按钮点击逻辑 #

import { useColor } from './ColorContext';

function Modal() {
  const { changeBgColor } = useColor();
  return (
    <div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px' }}>
      <h3>背景模态框</h3>
      <button 
        onClick={() => changeBgColor('red')}
        style={{ backgroundColor: 'red', color: 'white', padding: '8px 16px', margin: '0 5px' }}
      >红色</button>
      <button 
        onClick={() => changeBgColor('green')}
        style={{ backgroundColor: 'green', color: 'white', padding: '8px 16px', margin: '0 5px' }}
      >绿色</button>
      <button 
        onClick={() => changeBgColor('blue')}
        style={{ backgroundColor: 'blue', color: 'white', padding: '8px 16px', margin: '0 5px' }}
      >蓝色</button>
    </div>
  );
}

export default Modal;

关于Redux的补充说明 #

如果后续你的项目需要管理更多全局状态（比如用户登录状态、多主题配置、复杂表单状态等），可以考虑切换到Redux。核心步骤包括：

• 安装redux和react-redux依赖
• 创建store，定义reducer处理颜色修改的action
• 用Provider包裹App组件
• 在Page组件中用useSelector获取颜色状态，在Modal中用useDispatch触发修改颜色的action

参考资料建议 #

• React官方文档：重点学习createContext、useContext和Provider的基础用法，理解上下文的作用范围和状态传递逻辑。
• Redux官方文档：如果后续接触Redux，先从“快速入门”章节入手，掌握store、action、reducer三大核心概念。

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