如何将mapbox坐标传递给反应中的父类？

Question

我试图在mapbox gl地图上设置一个标记，点击地图，然后将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

Answer 1

在父类中这样定义子组件。。。

<ChildComponent
    parent={this}
/>

然后在子类中调用父类函数...

this.props.parent.someFunction();

完整的工作演示。在本例中，子级显示父级的id字段，但它也可能是一个函数调用，在函数调用中，我可以包括我想从子级传递给父级函数的任何参数。

如果您好奇的话，我有一个类似问题的答案：在React with类组件中，从子级向父级传递Ref。