React 中带有类的外部脚本

Question

我正在尝试将外部 map 服务嵌入到我的 React 应用程序中。 他们建议将 API 集成到常规 HTML web 页面中，如下所示：

<script type="text/javascript" src="//map.search.ch/api/map.js"></script>
<script type="text/javascript">new SearchChMap({center:[123456,987654],y:"-1m",poigroups:"default"});</script>

我尝试在我的typescript React 组件中应用它，如下所示：

declare class SearchChMap {
  constructor(_: {})
}

// ...

<>
  <script type="text/javascript" src="//map.search.ch/api/map.js"></script>
  <script type="text/javascript">{new SearchChMap({ center: [123456, 987654], poigroups: "default" })}</script>
  {/* ... */}
</>

编译时，我收到以下运行时错误： ReferenceError: SearchChMap is not defined 。

从 React 组件的外部托管脚本中使用旧版 JavaScript 类的正确方法是什么？

更新：

我尝试了这个答案无济于事，使用以下代码：

componentDidMount(): void {
  const script1: HTMLScriptElement = document.createElement("script");
  script1.src = "//map.search.ch/api/map.js";
  script1.async = true;
  document.body.appendChild(script1);

  const script2: HTMLScriptElement = document.createElement("script");
  script2.text = 'new SearchChMap({center:[123456,987654],y:"-1m",poigroups:"default"});';
  script2.async = true;
  document.body.appendChild(script2);
}

这会在几秒钟后导致完全相同的错误消息，因为脚本是动态添加的。

更新 2：

按照 AWolf 的建议，将AWolf创建移动到onload就可以了：

componentDidMount(): void {
  const scriptTag: HTMLScriptElement = document.createElement("script");
  scriptTag.src = "//map.search.ch/api/map.js";
  document.head.appendChild(scriptTag);

  scriptTag.onload = () => {
    new SearchChMap({ center: this.props.center, container: this.props.containerId });
  };
}

Answer 1

您可以将脚本标签添加到public/index.html并将其与window.SearchChMap一起使用，或者如果您更喜欢从您的componentDidMount加载它，您可以像下面的代码片段一样执行它（与以下沙箱中的代码相同）。

它使用附加脚本标签的onload来延迟 object 的创建，直到新脚本被加载。

使用了useRef ，因此您可以在 function 的其他位置使用创建的 object（示例中未使用）。

需要代码中的useEffect来确保在添加标签之前 DOM 已经准备好。 与具有componentDidMount生命周期方法的基于类的组件中的行为相同。 useEffect的返回可用于进行清理，例如return () => { /* remove script tag & dispose the window.SearchChMap */} （与componentWillUnmount相同）

import React, { useEffect, useRef } from "react";

export default () => {
  const SearchMap = useRef(); // optional, but useful if the Map object is used after mounting
  useEffect(() => {
    const scriptTag = document.createElement("script");
    scriptTag.src = "//map.search.ch/api/map.js";
    document.body.appendChild(scriptTag);

    scriptTag.onload = () => {
      SearchMap.current = new window.SearchChMap({ center: "Zürich" });
    };
  }, [SearchMap]);

  return (
    <div
      id="mapcontainer"
      style={{ maxWidth: "500px", height: "400px", border: "2px inset #ccc" }}
    />
  );
};