升级react-leaflet至4.2.1后，withLeaflet导出未找到问题求助

问题根源 #

react-leaflet从v4版本开始彻底移除了withLeaflet高阶组件，转而完全采用基于Hooks的API（如useMap、useMapEvents）来实现地图实例的访问与事件处理，这是版本升级后的核心API变更。

解决方案 #

1. 替换withLeaflet的用法 #

如果你之前通过withLeaflet获取地图实例，直接改用useMap钩子即可：

// 旧代码（基于withLeaflet）
import { withLeaflet } from 'react-leaflet';

class CustomMapComponent extends React.Component {
  componentDidMount() {
    const map = this.props.leaflet.map;
    // 执行地图相关操作
  }
}

export default withLeaflet(CustomMapComponent);

// 新代码（基于useMap钩子）
import { useMap } from 'react-leaflet';
import { useEffect } from 'react';

function CustomMapComponent() {
  const map = useMap();

  useEffect(() => {
    if (map) {
      // 执行地图相关操作
    }
  }, [map]);

  return <div>...</div>;
}

export default CustomMapComponent;

2. 适配相关依赖的写法 #

你的其他leaflet相关依赖版本已适配react-leaflet v4，但需注意对应API的变化：

• react-leaflet-draw@0.20.4：需配合FeatureGroup组件使用，且内部事件处理可通过组件props直接绑定，无需依赖withLeaflet
• react-leaflet-markercluster@3.0.0-rc1：直接以组件形式引入使用，如需访问集群实例，可通过useRef获取

3. 批量改造自定义组件 #

所有依赖withLeaflet注入leaflet props的自定义组件，都需要改为Hooks写法：

• 地图实例：用useMap直接获取
• 地图事件监听：用useMapEvents替代原有的事件绑定逻辑

注意事项 #

• 确保项目React版本≥16.8（支持Hooks），这是react-leaflet v4的最低要求
• 若使用类组件，建议重构为函数组件以适配新API，或自行封装兼容层（不推荐）

内容的提问来源于stack exchange，提问作者jawad zahoor