react项目中让一个变量变成全局变量
时间: 2024-01-10 18:18:40 浏览: 28
在 React 项目中,可以使用全局状态管理工具来实现全局变量。其中,最常用的工具是 Redux 和 Context。
使用 Redux,可以创建一个全局的 store,将需要全局共享的变量存储在 store 中。可以使用 `createStore` 方法创建 store,使用 `Provider` 组件将 store 注入到 React 组件中,然后在需要使用全局变量的组件中使用 `connect` 方法连接 store。
以下是一个使用 Redux 实现全局变量的示例代码:
```javascript
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';
// 定义 reducer
function rootReducer(state = { globalVariable: '' }, action) {
switch (action.type) {
case 'SET_GLOBAL_VARIABLE':
return { ...state, globalVariable: action.payload };
default:
return state;
}
}
// 创建 store
const store = createStore(rootReducer);
// 设置全局变量的 action
function setGlobalVariable(variable) {
return { type: 'SET_GLOBAL_VARIABLE', payload: variable };
}
// 在组件中使用全局变量
function MyComponent(props) {
const { globalVariable, setGlobalVariable } = props;
function handleClick() {
setGlobalVariable('new global variable');
}
return (
<div>
<p>global variable: {globalVariable}</p>
<button onClick={handleClick}>Change global variable</button>
</div>
);
}
// 连接 store 和组件
const ConnectedMyComponent = connect(
state => ({ globalVariable: state.globalVariable }),
{ setGlobalVariable }
)(MyComponent);
// 将 store 注入到组件中
function App() {
return (
<Provider store={store}>
<ConnectedMyComponent />
</Provider>
);
}
```
使用 Context,可以创建一个全局的 context,在 context 中存储需要全局共享的变量。可以使用 `createContext` 方法创建 context,使用 `Provider` 组件将 context 注入到 React 组件中,然后在需要使用全局变量的组件中使用 `useContext` 方法获取 context。
以下是一个使用 Context 实现全局变量的示例代码:
```javascript
import React, { createContext, useContext, useState } from 'react';
// 创建 context
const GlobalContext = createContext();
// 在 context 中存储全局变量
function GlobalProvider(props) {
const [globalVariable, setGlobalVariable] = useState('');
return (
<GlobalContext.Provider value={{ globalVariable, setGlobalVariable }}>
{props.children}
</GlobalContext.Provider>
);
}
// 在组件中使用全局变量
function MyComponent() {
const { globalVariable, setGlobalVariable } = useContext(GlobalContext);
function handleClick() {
setGlobalVariable('new global variable');
}
return (
<div>
<p>global variable: {globalVariable}</p>
<button onClick={handleClick}>Change global variable</button>
</div>
);
}
// 将 GlobalProvider 注入到组件中
function App() {
return (
<GlobalProvider>
<MyComponent />
</GlobalProvider>
);
}
```