Как написать скрипт в React index. js? - PullRequest
Новая
       13

Как написать скрипт в React index. js?

0 голосов
/ 19 июня 2020

До сих пор я использовал basi c HTML / CSS / JS, а теперь попробовал использовать React / Gatsby. Я получил код API от Kakao и подтвердил, что следующий код работает в индексе. html: 

<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'),
        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>

Поскольку я пытаюсь использовать фреймворк React / Gatsby, мне нужно как-то переформатировать этот скрипт для индексации. js. HTML можно легко скопировать / вставить для возврата функции, но я не знаю, как написать приведенный выше скрипт в индексе React. 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={{"height" : "1000px", "width" : "500px"}}></div>

      <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608"></script>
      <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>
    </div>
  )}
}

Несколько вещей, которые я пробовал:

  1. Просто скопируйте скрипт вставки, как указано выше. В этом случае я получаю синтаксическую ошибку из скопированного скрипта:

Неожиданный токен. Вы имели в виду {'}'} или &rbrace;?

Используйте опасноSetInner HTML. Синтаксической ошибки нет, но API карты не работает должным образом.

Спасибо.

Ответы [ 2 ]

2 голосов
/ 19 июня 2020

Похоже, что часть этого скрипта нужно будет переписать для React. Вам следует искать для этого библиотеку, поддерживающую React. Если его нет, вы можете использовать DOM refs для доступа к mapContainer без document.getElementById. В качестве альтернативы, если вы просто хотите использовать этот скрипт как есть, вы можете использовать более простой генератор сайтов stati c, такой как Jekyll, который не требует использования React.

1 голос
/ 19 июня 2020

Там много реализаций.

Прежде всего, вам нужно загрузить свой скрипт асинхронно, используя тег <Helmet>, используя: 

import React from "react"
import Helmet from "react-helmet"

export default class Home extends React.Component {
  render() {

  return (
    <div style={{ color: `purple` }}>
      <Helmet>
        <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608" type="text/javascript"/>
      </Helmet> 
      <p>Welcome to donghwankim.com!</p>
      <p>Powered by Gatsby</p>
      <div id="map" style={{"height" : "1000px", "width" : "500px"}}></div>
    </div>
  )}
}

Из-за асинхронности вашего проблема, вам нужно загрузить контейнер <div> для вашей карты и дождаться его загрузки, затем вам нужно передать параметры карты. Предпочтительный метод в React, а не document.getElementById (или аналогичный), который извлекает значения напрямую из DOM, использует ссылки. Для этого вам нужно использовать жизненный цикл componentDidMount(), так как это вызываемый метод, который запускается сразу после монтирования (вставки в дерево) компонента: 

import React from "react"
import Helmet from "react-helmet"

export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount(){
  const map= this.myRef.current;
  const mapOption = {
    center: new kakao.maps.LatLng(37.56591, 126.97894), 
    level: 4, 
    mapTypeId : kakao.maps.MapTypeId.ROADMAP 
  };

  const yourMap = new kakao.maps.Map(map, mapOption);
 }

  render() {

  return (
    <div style={{ color: `purple` }}>
      <Helmet>
        <script src="https://dapi.kakao.com/v2/maps/sdk.js?appkey=3199e8f198aff9d5aff73000faae6608" type="text/javascript"/>
      </Helmet> 
      <p>Welcome to donghwankim.com!</p>
      <p>Powered by Gatsby</p>
      <div id="map" ref={this.myRef}  style={{"height" : "1000px", "width" : "500px"}}></div>
    </div>
  )}
}

Примечание: вы может потребоваться отключить карту, чтобы избежать чрезмерного потребления ресурсов. Это зависит от реализации библиотеки и ее документации.

Рекомендуемая литература / ссылки:

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...