React 项目中动态设置环境变量

动态设置环境变量是指，在 React 项目运行过程中，使用程序代码对项目的环境变量进行修改、新增或删除的过程。

以下为详细的操作步骤及示例说明：

步骤：

1. 首先，需要创建一个 .env 文件，用于存放环境变量，文件名必须以 .env 结尾。
2. 在 .env 文件中添加所需要的环境变量，按照 KEY=VALUE 的格式进行书写，例如：REACT_APP_API_KEY=123456。
3. 在 React 代码中使用 process.env 对象读取环境变量。例如： const api_key = process.env.REACT_APP_API_KEY。
4. 使用读取到的变量进行相应的操作。

需要注意的是，以上操作需要在项目重新启动后才能生效。

此外，还可以在运行项目时，通过传递参数的方式来动态设置环境变量，具体操作如下：

1. 在 package.json 文件中修改启动命令，如下所示：

"scripts": {
    "start": "react-scripts start",
    "start-alpha": "REACT_APP_ENV=alpha react-scripts start"
}

1. 在命令行中执行以下命令，即可传递参数并启动项目：

npm run start-alpha

1. 在代码中按照第三步的方法读取同名的环境变量即可。

示例：

假设我们需要动态设置一个使用的 API 地址，我们可以按照以下方式进行操作：

1. 首先在 .env 文件中添加启动地址：

REACT_APP_API=http://api.example.com

1. 在代码中读取环境变量并使用：

const api_url = process.env.REACT_APP_API;

此时，你的代码中的 api_url 变量即为 http://api.example.com。

另外，如果希望在运行项目时动态地改变 API 地址，则可以采用第二种传参的方式：

{
  "scripts": {
    "start-test": "REACT_APP_API=http://test.example.com react-scripts start",
    "start-prod": "REACT_APP_API=http://prod.example.com react-scripts start"
  }
}

可在命令行执行以下命令，以运行对应的环境：

npm run start-test

此时，你的代码中的 api_url 变量即可根据传入的参数进行动态设置。