reactjs - the - ¿Está bien usar ReactDOMServer.renderToString en el navegador en las áreas donde React no administra directamente el DOM?

render react component to string

Question

Estoy trabajando en una aplicación usando Leaflet (a través de react-leaflet ). Folleto manipula directamente el DOM. La biblioteca react-leaflet no cambia eso, solo le proporciona los componentes React que puede usar para controlar su mapa de Leaflet de una manera amigable con React.

En esta aplicación, quiero usar marcadores de mapas personalizados que son divs que contienen algunos elementos simples. La forma de hacerlo en Leaflet es establecer la propiedad de icon su marcador en un DivIcon , en el que puede configurar su HTML personalizado. Usted establece ese HTML interno al establecer la propiedad html de DivIcon en una cadena que contiene el HTML. En mi caso, quiero que ese HTML sea renderizado desde un componente React.

Para hacer eso, parece que el enfoque correcto es usar ReactDOMServer.renderToString() para representar el Componente que quiero dentro del marcador de mapa en una cadena, que luego establecería como la propiedad html del 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} />
    )
  }
}

Sin embargo, de acuerdo con los documentos de React :

Este [renderToString] solo debe usarse en el servidor.

¿Es esta una regla estricta, o solo tiene la intención de disuadir a las personas de eludir la gestión eficiente del DOM de ReactDOM?

No puedo pensar en otra (mejor) manera de lograr lo que busco. Cualquier comentario o idea sería muy apreciado.

Answer 1

De acuerdo con la nueva documentación: https://reactjs.org/docs/react-dom-server.html

Los siguientes métodos se pueden utilizar tanto en el servidor como en el entorno del navegador:

• renderToString ()
• renderToStaticMarkup ()

Answer 2

Sé que es una pregunta demasiado antigua, pero como no se ha respondido, quería compartir mis pensamientos.

Estaba usando lo mismo, renderToString , pero como la documentación recomienda no usarlo en el lado del cliente, lo logré de otra manera, al usar el método de procesamiento de react-dom para convertir el componente personalizado en div

var myDiv = document.createElement(''div'');

ReactDOM.render(
  <MarkerContents data={this.props.data} />,
  myDiv
);

var myIcon = L.divIcon({ 
    iconSize: new L.Point(50, 50), 
    html: myDiv.innerHTML
});