¿Está bien usar ReactDOMServer.renderToString en el navegador en áreas donde React no está administrando directamente el DOM?

Solución:

Según 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 navegador:

• renderToString ()
• renderToStaticMarkup ()

Sé que es una pregunta demasiado antigua, pero como no ha sido respondida, 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, usando el react-dom‘s render método para representar 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
});

Como ya dijo Thomas, sí, puedes usar renderToString en el cliente. Sin embargo, para que quede claro, deberá importar ReactDOMServer en el cliente, lo que puede parecer contrario a la intuición, pero parece ser correcto. Ejemplo (en el cliente):

import React from 'react';
import ReactDOMServer from 'react-dom/server';

const MyComp = (props) => {
  const html = ReactDOMServer.renderToString(<div>{someFunc(props)}</div>);
  // do something with your html, then
  return <div dangerouslySetInnerHTML={{__html: html}}></div>;
};

---

---

Utiliza Nuestro Buscador