React 中的全局变量
我们将介绍如何在 React 应用程序中创建和使用全局变量。
在 React 中创建一个全局变量以在多个函数中使用
当多个函数需要访问数据或写入对象时，会使用全局变量。
对于管理系统，我们需要在多个函数中访问某些数据，以创建一个可以在所有函数中访问的全局变量。
本教程将解释在 React 中创建全局变量并在多个函数或文件中使用它。
让我们使用下面的命令创建一个 React 应用程序。
# react
npx create-react-app my-app
在 React 中创建我们的新应用程序后，我们将使用此命令转到我们的应用程序目录。
# react
cd my-app
现在，让我们运行我们的应用程序来检查所有依赖项是否安装正确。
# react
npm start
我们将创建一个新文件 GlobalVar.js 来定义一个常量 globalVar 并为其分配一个值。之后，我们将导出变量。
所以我们在 GlobalVar.js 中的代码将如下所示。
# react
const globeVar = "I am a Global Variable";
export default globeVar;
现在我们已经导出了变量，它将作为全局变量工作。我们可以将此文件导入任何文件并将其用作全局变量。
所以，让我们在 App.js 中导入这个文件并使用全局变量。
# react
import "./styles.css";
import globeVar from "./GlobalVar";
export default function App() {
return (
<div className="App">
<h2>{globeVar}</h2>
</div>
);
}
输出：
现在，让我们在多个函数中使用这个全局变量来检查我们是否可以轻松访问它。
我们将在 App.js 中创建一个新函数 changeValue()，我们将在其中创建一个新变量 newVar 并将其中的 globeVar 与一个新字符串连接起来。
之后，我们将 console.log 和 newVar。
# react
function changeValue() {
this.newVar = globeVar + " with Changed Value";
console.log(this.newVar);
}
一旦我们创建了一个函数，我们将返回一个带有 onClick 方法的按钮。所以我们在 App.js 中的代码将如下所示。
# react
import "./styles.css";
import globeVar from "./GlobalVar";
export default function App() {
function changeValue() {
this.newVar = globeVar + " with Changed Value";
console.log(this.newVar);
}
return (
<div className="App">
<h2>{globeVar}</h2>
<button onClick={changeValue}>Button</button>
</div>
);
}
输出：
这样，我们就可以声明一个全局变量，并在一个或多个函数中显示或使用它。
你可以在此处查看完整代码。
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn