Как скопировать тег сценария HTML на внешний javascript?

Question

Я получил HTML скрипт от Kakao maps API для использования карты на моем веб-сайте Gatsby (React). Однако React не позволяет мне напрямую копировать следующий скрипт в index. js render (). Итак, я думаю о создании внешнего приложения. 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 в root вашего проекта и использовать функцию setHeadComponents из onRenderBody API для добавления сценариев в заголовок HTML:

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);
      `,
      }}
    />,
  ]);
};

Подробнее о его использовании см. docs