React Leaflet v3 实现自定义控件的正确方法是什么？

问题排查 #

• L.DomUtil.createAPI调用错误：该方法的入参顺序为(标签名, CSS类名, 父容器)，原代码将父容器作为第二个参数传入，导致子元素未正确插入控件容器，控件渲染为空。
• 控件类重复定义：L.Control.extend逻辑放在组件函数顶层，每次组件重新渲染都会覆盖L.Control.Dpts的定义，易引发实例异常。
• 副作用依赖不完整：useEffect仅监听dpts变化，props.position等参数变更时不会同步更新控件配置。
• 无动态更新逻辑：控件仅在初始化时渲染一次DOM，后续dpts数据更新时，控件内容无法同步刷新。
• 缺少事件清理逻辑：如果给控件内元素绑定了交互事件，未在onRemove阶段解绑会造成内存泄漏。

正确实现代码 #

import { useRef, useEffect } from 'react'
import { useMap } from 'react-leaflet'
import L from 'leaflet'

// 控件类定义移到组件外部，全局仅初始化一次
L.Control.Dpts = L.Control.extend({
  initialize: function (opts) {
    L.Util.setOptions(this, opts)
    // 存储动态数据的容器，后续可以直接更新
    this.dpts = opts.dpts || []
  },
  onAdd: function (map) {
    this.container = L.DomUtil.create('div', 'dpt-control-container')
    // 阻止地图事件冒泡到控件，避免点击控件时触发地图交互
    L.DomEvent.disableClickPropagation(this.container)
    
    this.renderContent()
    return this.container
  },
  // 封装内容渲染方法，方便后续动态更新
  renderContent: function () {
    this.container.innerHTML = ''
    // 正确传参：标签名、类名、父容器
    const input = L.DomUtil.create('input', 'dpt-control-input', this.container)
    input.placeholder = '请选择部门'
    // 这里可以根据this.dpts渲染下拉列表等其他内容
  },
  onRemove: function (map) {
    // 清理容器内所有元素和绑定的事件
    L.DomUtil.remove(this.container)
  }
})

L.Control.dpts = function (opts) {
  return new L.Control.Dpts(opts)
}

function DptCtl(props) {
  const map = useMap()
  const dpts = useSelector(dptsSelector)
  // 存储控件实例，避免重复创建
  const controlRef = useRef(null)

  useEffect(() => {
    // 初始化仅执行一次，创建控件并添加到地图
    controlRef.current = L.Control.dpts({ 
      position: props.position,
      dpts: dpts
    })
    map.addControl(controlRef.current)

    return () => {
      map.removeControl(controlRef.current)
      controlRef.current = null
    }
  // 初始化依赖仅需map和props.position
  }, [map, props.position])

  // 监听dpts变化，动态更新控件内容，无需重建控件
  useEffect(() => {
    if (!controlRef.current) return
    controlRef.current.dpts = dpts
    controlRef.current.renderContent()
  }, [dpts])

  return null
}

export default DptCtl

实现说明 #

• 控件类移到组件外部定义，全局仅初始化一次，避免重复覆盖
• 修正DOM创建API的参数顺序，同时添加L.DomEvent.disableClickPropagation阻止事件冒泡，避免控件交互和地图事件冲突
• 拆分两个useEffect分别处理控件初始化和动态数据更新，避免dpts变化时销毁重建整个控件，提升性能
• 封装renderContent方法统一处理控件内容渲染，数据更新时直接调用即可刷新视图
• 销毁控件时主动移除DOM元素，避免内存泄漏

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