How to connect yandex map to react component?

Question

React

Good evening! Dear masters of your craft, tell me how to connect a yandex map to a react application using native JavaScript, that is, not 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);
}

That is, you need to include this code in the React component, but how to write the script itself in import or where should it be located in the component? (

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

)
Thanks in advance!

Answer 1

You can use a special component.

Implementation example

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;

Answer 2

https://github.com/filamentgroup/loadJS