在react-leaflet中添加水印遇Control未定义错误，求正确导入方案

核心错误原因 #

你当前导入L的方式错误：import L from 'react-leaflet'，这里的L并不是Leaflet核心库的实例，而是react-leaflet的导出对象，自然没有Control属性，导致报错。

修正步骤及代码 #

1. 修正Leaflet核心库的导入
   把import L from 'react-leaflet'替换成：

   import L from 'leaflet'
   

2. 正确封装自定义水印控件（适配react-leaflet）
   react-leaflet需要将原生Leaflet控件通过createControlComponent包装成React组件，才能在MapContainer中使用。同时为了避免SSR问题，需确保控件逻辑仅在客户端环境执行。

3. 完整修正后的代码

   import { MapContainer, Marker, Popup, TileLayer, createControlComponent } from 'react-leaflet'
   import L from 'leaflet'
   import 'leaflet-defaulticon-compatibility'
   import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'
   import 'leaflet/dist/leaflet.css'
   import { useEffect, useState } from 'react'
   
   const Map = (props) => {
     const [WatermarkControl, setWatermarkControl] = useState(null)
   
     useEffect(() => {
       // 仅在客户端环境初始化控件，解决SSR问题
       if (typeof window !== 'undefined') {
         // 定义Leaflet自定义水印控件
         L.Control.Watermark = L.Control.extend({
           onAdd: function (map) {
             const img = L.DomUtil.create('img')
             img.src = 'https://leafletjs.com/docs/images/logo.png'
             img.style.width = '200px'
             return img
           },
           onRemove: function (map) {}
         })
   
         // 包装成react-leaflet可用的组件
         const Watermark = createControlComponent((props) => {
           return L.control.watermark(props)
         })
   
         // 扩展Leaflet的control命名空间
         L.control.watermark = function (opts) {
           return new L.Control.Watermark(opts)
         }
   
         setWatermarkControl(Watermark)
       }
     }, [])
   
     return (
       <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false} style={{ height: 400, width: "100%", borderRadius: '1em' }}>
         <TileLayer
           attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
         />
         <Marker position={[51.505, -0.09]}>
           <Popup>
             {props.stuff?.jack} {/* 可选：添加可选链避免props.stuff不存在时报错 */}
           </Popup>
         </Marker>
         <Marker position={[51.505, -0.11]}></Marker>
         {/* 控件加载完成后再渲染 */}
         {WatermarkControl && <WatermarkControl position="bottomright" />}
       </MapContainer>
     )
   }
   
   export default Map
   

关键说明 #

• createControlComponent是react-leaflet提供的工具，用于将原生Leaflet控件转换为React组件，符合react-leaflet的组件化使用方式。
• 使用useEffect结合typeof window !== 'undefined'确保控件逻辑只在客户端执行，解决SSR环境下Leaflet无法初始化的问题。
• 控件渲染时添加条件判断，避免组件未初始化完成就渲染导致的错误。

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