当前位置：首页 > React

react如何修改context的值

2026-01-25 04:53:03React

修改 React Context 的值

在 React 中，Context 的值可以通过 Provider 组件的 value 属性进行修改。以下是具体实现方法：

使用 `useState` 或 `useReducer` 动态更新 Context

创建一个包含状态管理逻辑的 Context Provider，将状态和更新函数通过 Context 传递给子组件。

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

const MyContext = createContext();

function MyProvider({ children }) {
  const [value, setValue] = useState('initialValue');

  return (
    <MyContext.Provider value={{ value, setValue }}>
      {children}
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const { value, setValue } = useContext(MyContext);

  return (
    <button onClick={() => setValue('newValue')}>
      Update Context: {value}
    </button>
  );
}

function App() {
  return (
    <MyProvider>
      <ChildComponent />
    </MyProvider>
  );
}

使用 `useReducer` 处理复杂状态逻辑

对于更复杂的状态更新逻辑，可以使用 useReducer 替代 useState。

import React, { createContext, useReducer, useContext } from 'react';

const MyContext = createContext();

function reducer(state, action) {
  switch (action.type) {
    case 'UPDATE':
      return { ...state, value: action.payload };
    default:
      return state;
  }
}

function MyProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, { value: 'initialValue' });

  return (
    <MyContext.Provider value={{ state, dispatch }}>
      {children}
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const { state, dispatch } = useContext(MyContext);

  return (
    <button onClick={() => dispatch({ type: 'UPDATE', payload: 'newValue' })}>
      Update Context: {state.value}
    </button>
  );
}

多层嵌套 Context 更新

当需要跨多层组件更新 Context 时，可以将更新函数通过 Context 传递。

react如何修改context的值

const ThemeContext = createContext({
  theme: 'light',
  toggleTheme: () => {}
});

function ThemeProvider({ children }) {
  const [theme, setTheme] = useState('light');

  const toggleTheme = () => {
    setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
  };

  return (
    <ThemeContext.Provider value={{ theme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
}

function ThemedButton() {
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button 
      onClick={toggleTheme}
      style={{ background: theme === 'light' ? '#fff' : '#333' }}
    >
      Toggle Theme
    </button>
  );
}