Как использовать компонент реакции в настройке всплывающего окна для листовки

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 /> будет отображаться неправильно.

Вы можете попробовать преобразовать JSX в HTML, используя ReactDOMServer.renderToString()

Попробуйте:

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

Читать здесь: https://reactjs.org/docs/react-dom-server.html#rendertostring