Можно ли использовать ReactDOMServer.renderToString в браузере в тех областях, где React напрямую не управляет DOM?
Я работаю над приложением, используялистовка (с помощьюреагируют-листовка). Листовка напрямую манипулирует DOM. Библиотека реагирующих листовок не меняет этого, она просто дает вам компоненты React, которые вы можете использовать для управления своей картой Leaflet в удобной для React форме.
В этом приложении я хочу использовать пользовательские маркеры карты, представляющие собой элементы div, содержащие несколько простых элементов. Способ сделать это в Leaflet - установить маркерicon
собственность наDivicon, в котором вы можете установить свой собственный HTML. Вы устанавливаете этот внутренний HTML, устанавливая DivIcon'shtml
свойство строки, содержащей HTML. В моем случае я хочу, чтобы этот HTML отображался из компонента React.
Чтобы сделать это, кажется, что правильный подход заключается в использованииReactDOMServer.renderToString()
визуализировать нужный мне Компонент внутри маркера карты в строку, которую я бы затем установил какhtml
собственность DivIcon:
MyMarker.js:
import React, { Component } from 'react'
import { renderToString } from 'react-dom/server'
import { Marker } from 'react-leaflet'
import { divIcon } from 'leaflet'
import MarkerContents from './MarkerContents'
export class MyMarker extends Component {
render() {
const markerContents = renderToString(<MarkerContents data={this.props.data} />)
const myDivIcon = divIcon({
className: 'my-marker',
html: markerContents
})
return (
<Marker
position={this.props.position}
icon={myDivIcon} />
)
}
}
Однако, согласноРеагировать на документы:
Этот [renderToString] должен использоваться только на сервере.
Это строгое правило, или оно предназначено только для того, чтобы отговорить людей обойти эффективное управление DOM в ReactDOM?
Я не могу придумать другой (лучший) способ достичь того, чего я хочу. Любые комментарии или идеи будут с благодарностью.