React 如何在运行时注入 js 依赖

Question

所以需要在我的应用程序中遵循依赖关系：

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY></script>

问题是直到运行时我才拥有我的密钥。我不确定在运行时注入它的“反应”方式是什么？我意识到我可以获取 head 元素并在窗口 onload 事件中添加 html，如下所示：

document.head.append('<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY></script>');

这是最好的方法吗？

Answer 1

您是否尝试在您的 componentDidMount 或 useEffect 上添加？

componentDidMount() {
      const script = document.createElement('script');
      const key = <GET_YOUR_API_KEY>
      script.type = 'text/javascript';
      script.src = `https://maps.google.com/maps/api/js?key=${key}`;
      script.id = 'someID';
      document.body.appendChild(script);
      script.addEventListener('load',() => console.log('map loaded'))
  }