如何从另一个组件更改react Context的值_React JS Context API:从另一个组件访问输入值_React context api仅呈现使用已更改的值的组件 - 腾讯云开发者社区

在React中，Context API提供了一种在组件树中共享数据的方式，而不必显式地通过组件树的每一层传递props。如果你想从另一个组件更改React Context的值，你需要遵循以下步骤：

基础概念

创建Context：首先，你需要使用React.createContext创建一个新的Context对象。
提供Context：使用Context对象的Provider组件包裹你的组件树，并通过value属性提供你想要共享的数据。
消费Context：在组件树中的任何位置，你可以使用useContext Hook或者Context对象的Consumer组件来消费Context中的数据。

更改Context的值

要更改Context的值，你需要创建一个函数来更新状态，并将这个函数通过Context传递给需要更改值的组件。

示例代码

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

// 创建Context
const MyContext = createContext();

// 提供Context的组件
function MyProvider({ children }) {
  const [value, setValue] = useState('initial value');

  // 更新Context值的函数
  const updateValue = (newValue) => {
    setValue(newValue);
  };

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

// 消费Context的组件
function MyComponent() {
  const { value, updateValue } = useContext(MyContext);

  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={() => updateValue('new value')}>Change Value</button>
    </div>
  );
}

// 应用根组件
function App() {
  return (
    <MyProvider>
      <MyComponent />
    </MyProvider>
  );
}

export default App;