如何在React宣传单中放置加载事件处理程序？

Question

我需要关于我的地图应用程序的react-leaflet的帮助。我正在尝试添加一个加载函数，一旦客户端登录到地图上，该函数将在加载时执行。但在react-leaflet上，没有onLoad。

现在我只有这样的想法：

function CenterCoords() {
    const map = useMapEvents({
        // TODO resolve onload
        layeradd() {
            map.locate()
            console.log('loading')
        },
        locationfound(e: any) {
            map.flyTo(e.latlng, map.getZoom())
        },
    })
    return null
}

我只使用了layeradd，但我不知道这是什么意思，react-leaflet文档没有提供有关其leaflet处理程序功能的任何提示。如果我依赖于leaflet文档，load和loading似乎不起作用。

Answer 1

MapContainer组件接受一个whenReady属性，该属性是一个在地图准备就绪时触发的函数。它还需要一个whenCreated属性，该属性是底层leaflet L.map实例的函数。但是你可以用它做任何你想做的事情：

<MapContainer
  center={center}
  zoom={zoom}
  scrollWheelZoom={false}
  whenReady={() => {
    console.log("This function will fire once the map is created")
  }}
  whenCreated={(map) => {
    console.log("The underlying leaflet map instance:", map)
  }}>
    ...
</MapContainer>

load和loading事件更特定于层，如tileLayers或imageLayers。

Answer 2

你可以在第一次渲染后使用useEffect来运行一些东西。在useEffect中使用空数组作为第二个参数，只运行一次。

React.useEffect(() => {
  myFunction();
}, []);