Estou trabalhando em um aplicativo usandoFolheto (através dafolheto informativo) O folheto manipula diretamente o DOM. A biblioteca react-leaflet não muda isso, apenas fornece componentes do React que você pode usar para controlar seu mapa do Leaflet de uma maneira amigável ao React.

Neste aplicativo, quero usar marcadores de mapa personalizados que sejam divs contendo alguns elementos simples. A maneira de fazer isso no Leaflet é definir asicon propriedade para umDivIcon, no qual você pode definir seu HTML personalizado. Você define esse HTML interno, definindo as configurações do DivIcon.html propriedade para uma sequência que contém o HTML. No meu caso, quero que o HTML seja renderizado a partir de um componente React.

Para fazer isso, parece que a abordagem correta é usarReactDOMServer.renderToString() para transformar o componente que eu quero dentro do marcador do mapa em uma string, que eu definiria comohtml propriedade do 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} />
    )
  }
}

No entanto, de acordo com oReagir documentos:

Este [renderToString] deve ser usado apenas no servidor.

Essa é uma regra estrita ou serve apenas para dissuadir as pessoas de contornar o gerenciamento eficiente do DOM do ReactDOM?

Não consigo pensar em outra (melhor) maneira de realizar o que estou procurando. Quaisquer comentários ou idéias serão muito apreciados.