Question

我正在尝试在地图上放置弹出窗口。对于设置内容，使用<div>没问题，但是当我尝试插入React组件时，它会显示一个空白弹出窗口。

layer.on({
            'mouseover': (e) => {
                L.popup({
                    closeButton: false,
                }).setLatLng([e.latlng.lat, e.latlng.lng]).setContent(`<div>{<TooltipFeatureDetails />}</div>`).openOn(this.map);
            }
        });

Answer 1

HTML无法理解JSX。因此，<TooltipFeatureDetails />无法正确呈现。

您可以尝试使用ReactDOMServer.renderToString()

将JSX转换为HTML

尝试：

.setContent(`<div>${ReactDOMServer.renderToString(<TooltipFeatureDetails />)}</div>`)

在这里阅读：https://reactjs.org/docs/react-dom-server.html#rendertostring

如何在设置传单弹出窗口中使用React组件

1 个答案: