如何在React中声明全局变量？

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

// 在根组件中提供 Context
const App = () => {
  const globalVariable = "I am a global variable";

  return (
    <GlobalContext.Provider value={globalVariable}>
      <ChildComponent />
    </GlobalContext.Provider>
  );
};

// 在子组件中使用 Context
const ChildComponent = () => {
  const globalVariable = useContext(GlobalContext);

  return <div>{globalVariable}</div>;
};

// store.js
import { createStore } from 'redux';

const initialState = {
  globalVariable: "I am a global variable"
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    default:
      return state;
  }
};

const store = createStore(reducer);

export default store;

// 在根组件中提供 Store
import { Provider } from 'react-redux';
import store from './store';

const App = () => {
  return (
    <Provider store={store}>
      <ChildComponent />
    </Provider>
  );
};

// 在子组件中使用 Store
import { useSelector } from 'react-redux';

const ChildComponent = () => {
  const globalVariable = useSelector(state => state.globalVariable);

  return <div>{globalVariable}</div>;
};

// 在某个组件中声明全局变量
window.globalVariable = "I am a global variable";

// 在其他组件中使用全局变量
const ChildComponent = () => {
  return <div>{window.globalVariable}</div>;
};

// globalVariables.js
export const globalVariable = "I am a global variable";

// 在组件中导入全局变量
import { globalVariable } from './globalVariables';

const ChildComponent = () => {
  return <div>{globalVariable}</div>;
};