在react.js中的脚本标记中使用javascript SDK_Javascript_Html_Reactjs

在react.js中的脚本标记中使用javascript SDK

javascript html reactjs

在react.js中的脚本标记中使用javascript SDK,javascript,html,reactjs,Javascript,Html,Reactjs,基本上，我正在尝试将第三方提供的外部JDK实现到我的react应用程序中。它本质上是在页面上插入一个交互式地图。在使用指南中，它的实现方式如下： <div class="mapdiv" id="some_id" other_important_content="something"></div> <script src="https://example.com/script.js"></script> 您只需将其粘贴到html中的任何位置，它

基本上，我正在尝试将第三方提供的外部JDK实现到我的react应用程序中。它本质上是在页面上插入一个交互式地图。在使用指南中，它的实现方式如下：

<div class="mapdiv" id="some_id" other_important_content="something"></div>
<script src="https://example.com/script.js"></script>

您只需将其粘贴到html中的任何位置，它就会在mapdiv中加载地图

显然这不是react处理这件事的方式。我想要一个MapWidget组件，但是我应该如何导入这个脚本呢？它没有NPM包。我假设脚本查找div并加载相关内容。在react中处理此问题的最佳实践是什么？

您可以像这样将其包含在index.html中

<!doctype html>
<head>
  <meta charset="utf-8">
  <title>Title</title>
</head>
<body>

  <script async defer src="https://example.com/script.js"></script>
  <script src="./index.js" async></script>

</body>
</html>

  componentDidMount() {
    loadJS(
      "https://example.com/script.js"
    ) 
  }

function loadJS(src) {
  const ref = window.document.getElementsByTagName("script")[0] 
  const script = window.document.createElement("script") 
  script.src = src 
  script.async = true 
  ref.parentNode.insertBefore(script, ref) 
}