使用react挂钩设置全局函数/变量

// 创建一个全局的Context
const GlobalContext = React.createContext();

// Reducer函数，用于处理状态更新
function reducer(state, action) {
  switch (action.type) {
    case 'UPDATE_DATA':
      return { ...state, data: action.payload };
    default:
      return state;
  }
}

// 提供全局状态的组件
function GlobalProvider({ children }) {
  const [state, dispatch] = React.useReducer(reducer, { data: '' });

  // 全局函数示例
  const updateData = (newData) => {
    dispatch({ type: 'UPDATE_DATA', payload: newData });
  };

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

// 使用全局状态的组件
function SomeComponent() {
  const { state, updateData } = React.useContext(GlobalContext);

  return (
    <div>
      <p>{state.data}</p>
      <button onClick={() => updateData('New Data')}>Update Data</button>
    </div>
  );
}

// 应用入口
function App() {
  return (
    <GlobalProvider>
      <SomeComponent />
    </GlobalProvider>
  );
}

export default App;