如何在Leaflet的popup.setContent()中渲染React组件？

核心思路是利用popup.setContent支持传入原生HTMLElement的特性，先把React组件渲染到一个临时创建的DOM容器中，再将该容器传入弹窗即可完整保留组件的交互逻辑。

具体实现步骤 #

• 临时创建一个空的DOM容器节点，无需提前挂载到页面主DOM树：const popupContainer = document.createElement('div')
• 将你的自定义React组件渲染到该容器节点中
• 直接把渲染完成的容器节点作为参数传给popup.setContent()
• 监听弹窗的销毁事件，手动卸载React组件避免内存泄漏

代码示例 #

React 17及更早版本 #

import ReactDOM from 'react-dom'
import L from 'leaflet'

// 初始化弹窗
const popup = L.popup()
const popupContainer = document.createElement('div')

// 渲染带交互的自定义组件
ReactDOM.render(
  <MyCustomComponent 
    {/* 正常传所有props，事件回调都可以正常触发 */}
    onClose={() => popup.close()}
  />, 
  popupContainer
)

// 绑定弹窗内容并打开
popup.setContent(popupContainer)
  .setLatLng([targetLat, targetLng])
  .openOn(mapInstance)

// 弹窗销毁前卸载React组件
popup.on('remove', () => {
  ReactDOM.unmountComponentAtNode(popupContainer)
})

React 18+版本 #

React 18改用createRootAPI实现渲染，逻辑完全一致：

import { createRoot } from 'react-dom/client'
import L from 'leaflet'

const popup = L.popup()
const popupContainer = document.createElement('div')
const root = createRoot(popupContainer)

root.render(<MyCustomComponent onClose={() => popup.close()} />)

popup.setContent(popupContainer)
  .setLatLng([targetLat, targetLng])
  .openOn(mapInstance)

popup.on('remove', () => {
  root.unmount()
})

优化建议 #

• 如果项目中需要多次实现该需求，可以将上述逻辑封装为自定义Hook，直接返回popup实例和操作方法，减少重复代码
• 若自定义组件需要依赖React上下文，可在渲染时包裹对应的Provider组件传入上下文即可正常使用

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