reactjs - 使用 'react-leaflet' 新 useLeaflet() Hook 的示例？

Question

我正在尝试使用钩子(Hook)获取对传单对象的引用，以便我可以查询不同事件上的新 map 边界(例如 Map.getBoundaries())。我对 reac-leaflet 还很陌生，这种方法可能是完全错误的，但这就是我现在所拥有的......

我想做的是获取每个 moveend 事件的 map 边界，如果有帮助的话......

Answer 1

首先，您只能在 Map 元素内部的组件中使用钩子(Hook):

<Map>
  <YourComponent />
</Map

然后在您的组件内您可以执行以下操作:

const YourComponent = () => {
  const { map } = useLeaflet();
  const [bounds, setBounds] = React.useState({});

  React.useEffect(() => {
    const eventHandler = event => {
      setBounds(event.target.getBounds());
      doSomethingElse();
    }
    map.on("moveend", eventHandler);

    return () => {
      map.off("moveend", eventHandler); // Remove event handler to avoid creating multiple handlers
    }
  }, [setBounds, map]);

  return {
    // Use bounds for whatever you need
    <div>Lat: {bounds.lat}; long: {bounds.lng}</div>
  }
}