在 componentDidMount() 中重新加载脚本答案

【问题标题】：Reload a script in componentDidMount()在 componentDidMount() 中重新加载脚本
【发布时间】：2019-08-16 21:35:25
【问题描述】：

我在我的 react 项目的一个组件中使用simplemaps。我在 index.html 中添加了这两个脚本 <script type="text/javascript" src="map/mapdata.js"></script> <script type="text/javascript" src="map/countrymap.js"></script>

这些脚本将地图加载到以下 div 中我的 React 组件之一中

<div id="map"></div>

由于某种原因，只有当 id="map" 的 div 位于 DOM 中以进行初始应用装载时，才会加载此地图。在切换路线时（即当这个 id="map" 的 div 不在 DOM 中时）并返回到同一个组件（即当这个 id="map" 的 div 再次出现在 DOM 中时）我无法除非我重新加载整个应用程序，否则请查看此地图。

【问题讨论】：

你不想那样做。你用的是什么地图API？打开街道地图/传单？谷歌地图？仅凭您给我们的任何东西，我们都无法解决这个问题……
我已在问题中添加了指向 simplemaps 的链接。我也编辑了这个问题，它不是重复的。
这是一个相当晦涩的库，因此您可能会得到更好的结果，因为您可以针对该库提交错误。然而，我可以告诉你多年来使用谷歌地图和传单 API 的地图真的不喜欢不渲染（例如，当反应路线发生变化时）。在窗口上触发调整大小事件可以解决这两个问题，它可能对您有帮助，也可能对您没有帮助。

标签： javascript reactjs react-router

【解决方案1】：

在js代码中

<script>

//code when switched
if(switched){ 
require('./map/mapdata.js'); 
} else {
require('./map/another.js'); }
</script>

这样的用法会起作用

【讨论】：

这没有回答问题。
那你也可以回答了。
我可以，但我认为给你一个机会先修改你的更公平。作为一个新的 SO 用户，当更高代表的用户突然闯入并抢走我的风头时，我总是很恼火。

【解决方案2】：

好吧，您可以创建一个脚本元素并将其附加到您的 body 上的 componentDidMount。如果您想确保它只加载一次，您还可以添加一个 ID 并检查该 ID 是否存在。

【讨论】：

这不能回答问题。
问题是如何在componentDidMount生命周期方法中加载脚本，这就是你的做法。
您是否尝试过附加一个与页面上已有的具有相同 url 的脚本标签？ OP 想要在每次触发路由时重新加载脚本。此外，如果它只是您认为的那样，那么它就是 a duplicate 并且应该关闭，而不是回答。
是的，我确实使用了这种技术，我不喜欢它，因为它违反了任何设计模式，但它确实有效。这就是为什么我补充说他应该顺便跟踪脚本标签是否已经存在。也许它是重复的。很抱歉，我是 Stackoverflow 的新手，不会立即发现重复项。你是对的，我应该查一下。不过，你听起来不像是个混蛋。
很公平。道歉。