react 如何创建全局变量

在 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 文件中使用全局变量，还需要使用第一种方式。