Как инициализировать yandex map в react компоненте вместе с загрузкой страницы?

Question

[AlexFo90]

Добрый день, натолкните пожалуйста на истину. есть главная компонента и есть компонента с картой

class MainComponent extends React.Component {

}

class MapComponent extends React.Component {
handleScriptLoad = () => {
    const {ymaps} = window;
    ymaps.ready(this.init);
  }

  init = () => {
    const {ymaps} = window;
    const myMap = new ymaps.Map('map', {
      center: [55.76, 37.64],
      zoom: 5,
      controls: []
    });
    return myMap;
  }

render() {
    const instanceMap = this.init();
    return (
      <div>
        <Script
          url="https://api-maps.yandex.ru/2.1/?&lang=ru_RU"
          onLoad={this.handleScriptLoad}
        />
        <button onClick={() => какая-то функция(instanceMap)}>Add</button>
        <div id='map' className={styles.containerMap}></div>
      </div>
    )
  }

}

мне нужно инициализировать карту при загрузке страницы сразу. Так как мне нужен доступ к экземпляру моей карты, я его хочу получить в render-методе и потом использовать его в приложении. То есть добавлять Placemark и и.т.д. Но в момент отрисовке render метода у меня еще нет доступа к ymaps поэтому он ругается... подскажите как исправить (вынести загрузку в компонент MainComponent или может жизненный цикл какой-то использовать ??? )

Answer 1

[Павел Антонов]

Используйте жизненный цикл componentDidMount() и в нем делайте вызов карты

componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять запросы к удаленным ресурсам

https://metanit.com/web/react/2.6.php

ps: насчет правильности подключения карты в вашем коде не уверен.
Советую ознакомиться с похожим вопросом Как работать с yandex map React?

Comments

[AlexFo90]

я просто не использую react-yandex-maps а делаю нативное подключение тегом Script. Она у меня подключается и работает. Что-то вроде понял сначала, а теперь думаю, что если componentDidMounth() сработает после рендера, то опять вопрос как мне получить экземпляр моей карты. рендер же сработает и не найдет const instanceMap = this.init();
выдает ошибку что не знает что такое ymaps, но это же и понятно, что загрузка карты будет ниже по коду??? или я что-то не так понимаю...

[Павел Антонов]

AlexFo90, можно попробовать в жизненном цикле записать экземпляр карты в state а после рендера и отработки didMount обновится state и работайте с ним. Точно не подскажу с картами не доводилось работать в реакте впринципе.

[Алексей Беспалов]

Есть модуль на github react-yandex-map. Как-то называется. Может с ним решите быстрее вопросы.