将全局窗口中的 var 加载到 React App 中不起作用答案

【问题标题】：Loading a var from window global into React App not working将全局窗口中的 var 加载到 React App 中不起作用
【发布时间】：2020-05-20 08:28:39
【问题描述】：

我知道对此有很多答案。我的目的是拥有一个 js 文件，我可以使用 terraform 将其注入到 docker 映像中，这样我就可以在部署期间轻松更改客户端徽标，并为我的 react ui 提供一个 docker 映像。我已经尝试了以下答案中的解决方案：

how-can-i-pass-a-variable-from-outside-to-a-react-app

how-to-include-external-javascript-in-react

external-javascript-is-not-working-in-react-js

react-accessing-a-var-from-a-script-in-a-component

最简单的方法似乎是在 index.html 的 head 中导入一个脚本，并在其中声明 var。我的 index.html 中有以下内容，而 env.js 位于成功加载其他 js 文件（情节）的静态文件夹中。

    ...
    <script src="http://localhost:3000/env.js"></script>
  </head>

我在 env.js 中有以下内容

window.logo_file = '/images/demo.jpg';

然后在我的 React 组件中我有：

        <div className={'clientsLogo'}>
          <img
            src={window.logo_file}
            alt={'client-logo'}
            height={61}
            style={{ verticalAlign: 'bottom' }}
          />
        </div>

我还尝试在 env.js 中使用 logo_file = '/images/demo.jpg'; 添加 export default logo_file。

在使用它之前，我尝试将 window.logo_file 分配给 const。

但是导入的脚本没有将它的变量添加到全局窗口对象中，我为什么不这样做。

【问题讨论】：

它与“从窗口加载 var”无关，与使用 webpack 导入图像的方式无关，/images/demo.jpg 它不是实际的图像位置。
window.logo_file = '/images/demo.jpg' 的第一种方法应该可以工作。这可能是缓存问题，/env.js 中包含旧数据，或者您在导入 <script src="http://localhost:3000/env.js"></script> 之前正在加载您的反应应用程序。尝试将脚本标签添加到 head 的顶部。
如前所述，我想要一个 docker 映像，而不是每个客户端一个具有不同映像名称的映像。因此，在 npm 构建了 React 应用程序之后，我需要从外部源加载每个客户端的图像文件的位置。
所以只需通过http加载图片
在部分顶部加载 env.js 脚本确实填充了 window.logo_file 变量。但由于某种原因，它现在无法加载部分中声明的以下脚本

标签： javascript reactjs

【解决方案1】：

答案是 env.js，即声明了 window 全局变量的文件，必须在加载 react 应用程序之前加载到要加载的 index.html 文件的 head 部分的顶部。

【讨论】：