将React环境变量插入到HTML脚本标记中

在React项目中，有时需要将环境变量插入到HTML脚本标记中，这通常用于配置API端点、密钥或其他敏感信息。以下是将React环境变量插入到HTML脚本标记中的基础概念和相关步骤：

基础概念

环境变量：在开发过程中，可能会有一些配置信息（如API密钥、数据库URL等），这些信息不应该硬编码在代码中，而是通过环境变量来管理。
HTML脚本标记：HTML中的<script>标签用于嵌入或引用JavaScript代码。

类型

客户端环境变量：在客户端JavaScript中可以直接访问的环境变量。
服务器端环境变量：仅在服务器端渲染（SSR）时可用。

应用场景

API端点配置：根据不同环境配置不同的API服务器地址。
第三方服务密钥：如地图服务、支付网关等。

实现步骤

以下是将React环境变量插入到HTML脚本标记中的具体步骤：

1. 设置环境变量

在项目根目录下创建.env文件，并添加环境变量：

REACT_APP_API_URL=https://api.example.com

注意：React环境变量必须以REACT_APP_开头。

2. 在React组件中使用环境变量

在React组件中可以直接访问这些环境变量：

const apiUrl = process.env.REACT_APP_API_URL;

3. 将环境变量插入到HTML脚本标记中

如果你需要在HTML的<script>标签中直接使用这些变量，可以通过以下方式实现：

方法一：使用`dangerouslySetInnerHTML`

在React组件中使用dangerouslySetInnerHTML来插入带有环境变量的脚本：

import React from 'react';

const ScriptWithEnv = () => {
  const apiUrl = process.env.REACT_APP_API_URL;

  return (
    <script
      dangerouslySetInnerHTML={{
        __html: `
          window.apiUrl = "${apiUrl}";
          // 其他脚本代码
        `
      }}
    />
  );
};

export default ScriptWithEnv;

方法二：使用`html-webpack-plugin`

如果你使用Webpack进行构建，可以利用html-webpack-plugin插件在生成的HTML文件中插入环境变量：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // 其他配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      templateParameters: (compilation, assets, assetTags, options) => {
        return {
          apiUrl: process.env.REACT_APP_API_URL,
        };
      },
    }),
  ],
};

然后在public/index.html中使用这些变量：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 其他头部标签 -->
</head>
<body>
  <script>
    window.apiUrl = "<%= htmlWebpackPlugin.options.apiUrl %>";
    // 其他脚本代码
  </script>
</body>
</html>