在 React 应用中创建全局变量一般有两种方式：
常规 JavaScript 方式
可以将变量直接声明在全局作用域中，例如在 index.html 的 <script> 标签中，或在主入口文件的顶部声明变量。
<!-- index.html --> <script> var GLOBAL_VAR = 'someValue'; </script>
// app.js import React from 'react'; console.log(GLOBAL_VAR); // 输出 'someValue' function App() { // ... }
使用 Context API
可以使用 React 的 Context API 来创建全局变量，这是 React 官方提供的一种方便的方式。Context 提供了一种在组件之间共享数据的方法，而无需显式地通过组件 props 将数据传递到每个层级。
首先，需要使用 createContext() 方法创建上下文对象：
// AppContext.js import React from 'react'; const AppContext = React.createContext(); export default AppContext;
然后，在应用的根组件中，使用 AppContext.Provider 将数据传递给所有子组件：
// index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import AppContext from './AppContext'; const someValue = 'someValue'; ReactDOM.render( <AppContext.Provider value={someValue}> <App /> </AppContext.Provider>, document.getElementById('root') );
在子组件中，可以使用 AppContext.Consumer 来访问全局变量：
// MyComponent.js import React from 'react'; import AppContext from './AppContext'; function MyComponent() { return ( <AppContext.Consumer> {value => <div>{value}</div>} </AppContext.Consumer> ); } export default MyComponent;
这样，MyComponent 组件就可以访问全局变量了。
需要注意的是，使用 Context API 创建的全局变量，只能在 React 组件中使用。如果需要在普通 JavaScript 文件中使用全局变量，还需要使用第一种方式。
