如何将 HTML 脚本标签复制到外部 javascript？

Question

我收到了来自 Kakao 地图 API 的 HTML 脚本，以便在我的 Gatsby(React) 网站上使用 map。 但是，React 不允许我直接将以下脚本复制到 index.js 的 render() 中。 所以我正在考虑制作外部 App.js 来运行这段代码：

<script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=MYAPIKEY"></script>
<script>
    var mapContainer = document.getElementById('map'),
        mapOption = {
            center: new kakao.maps.LatLng(37.56682, 126.97865),
            level: 3,
            mapTypeId : kakao.maps.MapTypeId.ROADMAP
        }; 

    var map = new kakao.maps.Map(mapContainer, mapOption); 

</script>

如何将以下脚本标签写入 javascript？ 我认为第二个脚本只需要复制它们之间的行，但我不确定第一个脚本。

谢谢你。

Answer 1

您可以在项目的根目录中创建一个名为gatsby-ssr.js的文件，并使用来自onRenderBody API 的setHeadComponents function 将脚本添加到 Z4C4AD5FCA2E07A3F74DBB1 的头部

exports.onRenderBody = ({ setHeadComponents }) => {
  return setHeadComponents([
    <script src="//dapi.kakao.com/v2/maps/sdk.js?appkey=MYAPIKEY"/>,
    <script
      dangerouslySetInnerHTML={{
        __html: `
        var mapContainer = document.getElementById("map"),
        mapOption = {
          center: new kakao.maps.LatLng(37.56682, 126.97865),
          level: 3,
          mapTypeId: kakao.maps.MapTypeId.ROADMAP,
        };
      var map = new kakao.maps.Map(mapContainer, mapOption);
      `,
      }}
    />,
  ]);
};

在文档中阅读有关其用法的更多信息