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

问题描述

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

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

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

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

这是最好的方法吗？

解决方法

您是否尝试过在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'))
  }