想要在另一个组件中显示更新的状态值

// 状态管理组件
import React, { createContext, useState } from 'react';

// 创建一个Context对象
const StatusContext = createContext();

// 状态管理组件
const StatusProvider = ({ children }) => {
  const [status, setStatus] = useState('');

  // 更新状态值的方法
  const updateStatus = (newStatus) => {
    setStatus(newStatus);
  };

  return (
    <StatusContext.Provider value={{ status, updateStatus }}>
      {children}
    </StatusContext.Provider>
  );
};

// 使用状态管理组件
const App = () => {
  return (
    <StatusProvider>
      <ComponentA />
      <ComponentB />
    </StatusProvider>
  );
};

// 组件A
const ComponentA = () => {
  const { updateStatus } = useContext(StatusContext);

  const handleClick = () => {
    // 模拟更新状态值
    updateStatus('New status value');
  };

  return (
    <button onClick={handleClick}>Update Status</button>
  );
};

// 组件B
const ComponentB = () => {
  const { status } = useContext(StatusContext);

  return (
    <div>{status}</div>
  );
};