如何在 Gatsby/React 上运行脚本（API）？答案

【问题标题】：How does one run script(API) on Gatsby/React?如何在 Gatsby/React 上运行脚本（API）？
【发布时间】：2020-06-19 00:10:12
【问题描述】：

我将地图 API 脚本添加到 index.js 类返回：

<script>
  var mapContainer = document.getElementById('map'),  
      mapOption = {
          center: new kakao.maps.LatLng(37.56591, 126.97894), 
          level: 4, 
          mapTypeId : kakao.maps.MapTypeId.ROADMAP
      }; 

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

</script>

它给出了两个错误：

'}' 预期。（第 4 行“：”）意外的标记。你的意思是{'}'} 还是&rbrace;？（第 7 行“}”）

它应该在 html 中工作。反应不应该返回html属性吗？我曾经想过也许它不接受脚本，但是下面的代码没有语法错误：

<script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>

*使用 React 的 dangerouslySetInnerHTML 属性也不起作用。它确实修复了语法错误，但没有显示我的地图：

https://www.gatsbyjs.org/docs/custom-html/

* 不能修复语法错误

这是完整的index.js 代码：

import React from "react"

export default class Home extends React.Component {
  render() {
  return (
    <div style={{ color: `purple` }}>
      <p>Welcome to donghwankim.com!</p>
      <p>Powered by Gatsby</p>
      <div id="map" style={{width:'500px', height:'400px'}}></div>
      <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
      <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
          mapOption = {
            center: new kakao.maps.LatLng(37.56591, 126.97894), // 지도의 중심좌표
            level: 4, // 지도의 확대 레벨
            mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
          }; 

        // 지도를 생성한다 
        var map = new kakao.maps.Map(mapContainer, mapOption); 

       </script>

    </div>
  )}
}

我尝试并确认工作的原始 html 文件:(忘记添加 https: 和隐藏密钥。非常抱歉。)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>다음 지도 API</title>
</head>
<body>
    <div id="map" style="width:1000px;height:500px;"></div>

    <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
    <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div
            mapOption = {
                center: new kakao.maps.LatLng(37.56591, 126.97894), // 지도의 중심좌표
                level: 4, // 지도의 확대 레벨
                mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
            };

        // 지도를 생성한다
        var map = new kakao.maps.Map(mapContainer, mapOption);

    </script>
</body>
</html>

【问题讨论】：

你能发布更多相关代码吗？有很多方法可以使用客户端包。看看here。
你说它应该在 html 中工作。您是否有使用您的 api 密钥而不做出反应的工作示例？当我尝试使用 //dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f1xx 编写代码笔时，我收到错误 {"errorType":"AccessDeniedError","message":"wrong appKey(3199e8f1xx) format"}
运行站点时检查浏览器中的网络面板，看看脚本是否正在加载。我收到了 401（未经授权）。尝试在 codepen 上运行它时。
还更新您的问题，让人们知道错误是在gatsby build 过程中。
问题出在 kakao 方面。如果您愿意，可以再次隐藏您的 api 密钥。

标签： javascript html reactjs gatsby

【解决方案1】：

您可以使用dangerouslySetInnerHTML。

<script
  dangerouslySetInnerHTML={{
    __html: `
          var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
          mapOption = {
            center: new kakao.maps.LatLng(37.56591, 126.97894), // 지도의 중심좌표
            level: 4, // 지도의 확대 레벨
            mapTypeId : kakao.maps.MapTypeId.ROADMAP // 지도종류
          }; 

        // 지도를 생성한다 
        var map = new kakao.maps.Map(mapContainer, mapOption); 
        `,
  }}
/>

【讨论】：

它确实消除了语法错误，但由于某种原因它不能正常工作。
我敢打赌，您需要（从 kakao 方面）将您正在使用脚本的域列入白名单。
为什么会在纯 html 上工作，但在 gatsby 上却不行？
@Bingkongmaster 你有什么问题？您在控制台中看到了什么？怎么不行？
当我在普通的 index.html 文件上运行脚本时，我看到了一张完整的地图。当我将脚本插入到 dangerouslySetInnerHTML 中时，我看不到任何地图。