React-Leaflet：如何为bindPopup传入动态React组件/JSX？

我想给Leaflet的bindPopup函数传入React组件或JSX代码，但它只接受字符串作为输入。我试过用ReactDOMServer.renderToString方法，但是生成的弹窗没有动态交互性，没办法在PopupTemplate组件里注册onClick事件。另外，这个图层是通过react-leaflet draw绘制的多边形，没办法直接用react-leaflet的Popup组件，有没有更好的替代方案？

代码示例：

layer.bindPopup(
    ReactDOMServer.renderToString(
        <PopupTemplate
            layerId={layerId}
        />
    )
);

当前表现：

别用renderToString转静态HTML，直接在弹窗的DOM容器里挂载React组件，就能保留所有交互逻辑，具体操作如下：

1. 创建一个空的DOM容器元素，将其传入bindPopup
2. 监听图层的popupopen事件，在弹窗打开时把React组件挂载到容器中
3. 监听popupclose事件，弹窗关闭时卸载组件避免内存泄漏

代码实现（React 17及以下） #

import ReactDOM from 'react-dom';

const popupContainer = document.createElement('div');
layer.bindPopup(popupContainer);

// 弹窗打开时挂载组件
layer.on('popupopen', () => {
    ReactDOM.render(
        <PopupTemplate layerId={layerId} />,
        popupContainer
    );
});

// 弹窗关闭时卸载组件
layer.on('popupclose', () => {
    ReactDOM.unmountComponentAtNode(popupContainer);
});

代码实现（React 18+） #

import { createRoot } from 'react-dom/client';

const popupContainer = document.createElement('div');
layer.bindPopup(popupContainer);
let rootInstance = null;

layer.on('popupopen', () => {
    rootInstance = createRoot(popupContainer);
    rootInstance.render(<PopupTemplate layerId={layerId} />);
});

layer.on('popupclose', () => {
    if (rootInstance) {
        rootInstance.unmount();
        rootInstance = null;
    }
});

这种方式下，PopupTemplate组件内的onClick等交互事件都能正常触发，因为组件是真实挂载到DOM中的，而非静态字符串渲染的无交互内容。

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