Как я могу передать координаты mapbox родительскому классу в React? - PullRequest
Новая
       41

Как я могу передать координаты mapbox родительскому классу в React?

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

Я пытаюсь установить маркер на карте gl mapbox, щелкнув карту, а затем передаю объект lngLat обратно родительскому компоненту. Подскажите, пожалуйста, как я могу это сделать. Я новичок в изучении реакции, но знаю, что свойства могут быть унаследованы только от родительского класса, а setState устанавливает только локальное состояние. 

   // add a marker when user clicks a point
    map.on("click", "random-points-layer", e => {
      if (e.features.length) {
        const feature = e.features[0];
        document.getElementById('info').innerHTML =
      // e.point is the x, y coordinates of the mousemove event relative
      // to the top-left corner of the map
        JSON.stringify(e.point) +
        '<br />' +
       // e.lngLat is the longitude, latitude geographical position of the event
        JSON.stringify(e.lngLat.wrap());

//----------------------------------------------------------------------------------------------------
//   add a marker to the map
        var marker = new mapboxgl.Marker().setLngLat(e.lngLat).addTo(map);
//----------------------------------------------------------------------------------------------------
      }
    });

Родительский компонент выглядит так 

  render() {
     <div>
      <h1>Activate a beacon<h1/>
      <Map/>
     <div/>
}

Я следую этому руководству https://github.com/laneysmith/react-mapbox-example

1 Ответ

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

Определите дочерний компонент в родительском классе так же ... 

<ChildComponent
    parent={this}
/>

Затем вызовите функции родительского класса в дочернем классе ... 

this.props.parent.someFunction();

Полная рабочая демонстрация. В этом примере дочерний элемент отображает поле id родителя, но это также мог быть вызов функции, и в вызов функции я мог бы включить любые аргументы Я хотел бы перейти от дочерней функции к родительской.

У меня есть ответ на аналогичный вопрос, если вам интересно: Передача ссылки от дочернего элемента к родительскому в React с помощью компонента класса .

...