Как подключить yandex map в react компоненту?

Question

[Артем Кузнецов]

Добрый вечер! Уважаемые мастера своего дела, подскажите как подключить yandex карту в react приложение нативным JavaScript, то есть не react-yandex-maps?

ymaps.ready(init);

var myMap, myPlacemark1;

function init() {
  myMap = new ymaps.Map('map', {
    center: [42.5142065792, 64.2083574],
    zoom: 4,
  });

  myMap.behaviors.disable(['drag', 'scrollZoom']);

  myPlacemark1 = new ymaps.Placemark([52.732, 32.44], {
    balloonContentHeader: '<span class="header">Мой дом</span>',
    balloonContentBody: 'В этом доме живу Я',
    balloonContentFooter: 'вот и мой дом...',
    hintContent: 'Мой домик'
  })

  myMap.geoObjects.add(myPlacemark1);
}

То есть нужно вот этот код нужно подключить в компоненту React, а как прописать сам скрипт в import или где он должен находится в компоненте? (

<script src="https://api-maps.yandex.ru/2.1/?apikey=<ваш API-ключ>&lang=ru_RU" type="text/javascript"></script>

)

Спасибо заранее!

Answer 1

[Антон Спирин]

Можно использовать специальный компонент.
<Script src={src} onLoad={onLoad} />

Пример реализации

import React from 'react';

class Script extends React.Component {

  static displayName = 'Script';

  static scriptObservers = {};

  static loadedScripts = {};

  static erroredScripts = {};

  static idCount = 0;

  scriptLoaderId = `id${this.constructor['idCount']++}`;

  componentDidMount() {
    const { onError, onLoad, src } = this.props;

    if (this.constructor.loadedScripts[src]) {
      if (onLoad) onLoad();
      return;
    }

    if (this.constructor.erroredScripts[src]) {
      if (onError) onError();
      return;
    }

    if (this.constructor.scriptObservers[src]) {
      this.constructor.scriptObservers[src][this.scriptLoaderId] = this.props;
      return;
    }

    this.constructor.scriptObservers[src] = { [this.scriptLoaderId]: this.props };

    this.createScript();
  }

  createScript() {
    const { onCreate, src, attributes } = this.props;
    const script = document.createElement('script');

    if (onCreate) {
      onCreate();
    }

    if (attributes) {
      Object.keys(attributes).forEach(prop => script.setAttribute(prop, attributes[prop]));
    }

    script.src = src;

    if (!script.hasAttribute('async')) {
      script.async = true;
    }

    const callObserverFuncAndRemoveObserver = (shouldRemoveObserver) => {
      const observers = this.constructor.scriptObservers[src];
      Object.keys(observers).forEach((key) => {
        if (shouldRemoveObserver(observers[key])) {
          delete observers[this.scriptLoaderId];
        }
      });
    };

    script.onload = () => {
      this.constructor.loadedScripts[src] = true;
      callObserverFuncAndRemoveObserver((observer) => {
        if (observer.onLoad) observer.onLoad();
        return true;
      });
    };

    script.onerror = () => {
      this.constructor.erroredScripts[src] = true;
      callObserverFuncAndRemoveObserver((observer) => {
        if (observer.onError) observer.onError();
        return true;
      });
    };

    document.body.appendChild(script);
  }

  componentWillUnmount() {
    const { src } = this.props;
    const observers = this.constructor.scriptObservers[src];

    if (observers) {
      delete observers[this.scriptLoaderId];
    }
  }

  render() {
    return null;
  }
}

export default Script;

Comments

[Артем Кузнецов]

Что - то очень сложно( но спасибо, попробую)))

[Александр Таратин]

Жесть какая. Зачем все это?

[Антон Спирин]

Александр Таратин, это универсальное решение учитывающее жизненный цикл компонентов React, перерисовки древа и другие нюансы.

Answer 2

[Александр Таратин]

https://github.com/filamentgroup/loadJS

Comments

[Артем Кузнецов]

Спасибо, покопаюсь