介绍
开发人员更喜欢使用 React，因为它为他们构建应用程序提供了灵活性。在 React 中，所有 UI 组件都可以分离，因此是整个应用程序的构建块。在某些情况下，开发人员可能希望管理跨不同组件的静态全局变量。理想情况下，此变量应为常量，可以存储应用程序 URL、服务器 URL、主题颜色等数据。
在本指南中，您将学习如何在项目根目录中存储配置文件并在 React 中从中读取值。
使用 JSON 文件
您可以将配置数据存储在 JSON 文件中。
{
"SERVER_URL": "https://example.com/api/",
"THEME_COLORS": {
"PRIMARY": "#007bff",
"SECONDARY": "#fc3"
}
}
就像组件一样，可以使用import语句加载 JSON 文件。
import configData from "./config.json";
然后，您就可以像使用任何其他 JavaScript 对象一样使用该数据。例如，configData.SERVER_URL将为您提供config.json文件中指定的服务器 URL。
使用 .env 文件
.env文件允许您创建环境变量，其作用类似于本地 JavaScript 文件中声明的变量，但可全局访问。环境变量是只读的。这意味着您无法在 JavaScript 文件中动态更改它。
要声明环境变量，请在 React 项目的根目录中创建一个 .env 文件。请注意，React 中的环境变量必须以REACT_APP_为前缀，否则 React 将在打包期间忽略该变量。
REACT_APP_SERVER_URL=https://example.com/api/
REACT_APP_CLIENT_ID=1097hy67546hbdy2
现在您可以使用process.env全局对象直接访问这些变量，而无需添加任何 import 语句。
const SERVER_URL = process.env.REACT_APP_SERVER_URL;
const CLIENT_ID = process.env.REACT_APP_CLIENT_ID;
您还可以使用终端创建临时环境变量。
对于 Windows：
set "REACT_APP_CLIENT_ID=1097hy67546hbdy2" && npm start
对于 Linux：
REACT_APP_CLIENT_ID=1097hy67546hbdy2 npm start
请注意，使用终端创建的环境变量是短暂的，并且仅适用于该终端会话。
您还可以根据当前环境为环境变量设置不同的值。对于开发环境，您可以将变量存储在.env.development中。同样，对于生产设置，您可以将变量保存在.env.production中。
您可以参考dotenv文档了解更多详细信息。
使用 Webpack
在 webpack 中，有一个名为 externals 的配置选项，它提供了一种从包中排除依赖项的方法。使用 externals 选项，您可以为应用程序添加可在 JavaScript 文件中的任何位置访问的配置数据。
在您的 webpack.config.js 文件中，添加一个外部选项并将其值设置为包含配置数据的对象。
{
//
externals: {
'ConfigData': {
clientID: '1097hy67546hbdy2',
serverURL: 'https://example.com/api/'
}
}
}
然后在您的 JavaScript 文件中，通过将ConfigData对象作为外部模块导入来访问它。
import ConfigData from "ConfigData";
console.log(ConfigData.clientID); // 1097hy67546hbdy2
结论
在 React 应用中，存储配置数据的方式有很多种。但请记住，由于 React 在浏览器上运行，因此任何人都可以检查应用的源代码并查看所有数据。因此，请确保不要将敏感信息（例如私有或秘密 API 密钥）存储在客户端配置文件中，因为它们会在构建过程中捆绑到源代码中。
拥有单独的配置文件可让您即时访问变量，并提高代码库的可维护性，因为所有变量都在同一个文件中。核心应用程序将保持不变，您可以快速部署到具有不同配置的不同服务器。
了解更多
探索 Pluralsight 的这些 React 和 Java 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
