Czy można używać ReactDOMServer.renderToString w przeglądarce w obszarach, w których React nie zarządza bezpośrednio DOM?

Question

Pracuję nad aplikacją przy użyciu Leaflet (przez react-leaflet). Ulotka bezpośrednio manipuluje DOM. Biblioteka ulotek reagujących tego nie zmienia, po prostu daje składniki React, które można wykorzystać do kontrolowania mapy ulotek w sposób przyjazny dla reakcji.

W tej aplikacji chcę użyć niestandardowych znaczników mapy, które są elementami div zawierającymi kilka prostych elementów. Aby to zrobić w ulotce, ustaw właściwość znacznika icon na DivIcon, w której możesz ustawić niestandardowy kod HTML. Ustawisz ten wewnętrzny kod HTML, ustawiając właściwość DivIcon na html na łańcuch zawierający kod HTML. W moim przypadku chcę, aby ten HTML był renderowany ze składnika React.

W tym celu, wydaje się właściwym podejściem jest użycie ReactDOMServer.renderToString() renderować składnik, który chcę wewnątrz znacznika mapy na ciąg znaków, który ja wtedy ustawiony jako własność Divicon html:

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} /> 
    ) 
    } 
} 

Jednakże, zgodnie z React docs:

Ten [renderingToString] powinien być używany tylko na serwerze.

Czy jest to surowa zasada, czy też ma ona jedynie na celu zniechęcenie ludzi do obejścia efektywnego zarządzania DOM w ReactDOM?

Nie mogę wymyślić innego (lepszego) sposobu na osiągnięcie tego, co chcę. Wszelkie komentarze i pomysły będą mile widziane.

Answer 1

Według nowej dokumentacji: https://reactjs.org/docs/react-dom-server.html

następujące metody mogą być stosowane zarówno w serwerem a przeglądarką środowiskach:

• renderToString()
• renderToStaticMarkup()

Answer 2

Wiem, że to zbyt stare pytanie, ale ponieważ nie otrzymałem odpowiedzi, chciałem podzielić się moimi przemyśleniami.

używałem samo, renderToString, ale dokumentacja nie zaleca się używać go na stronie klienta, osiągnąłem go w inny sposób, za pomocą render metodę react-dom „s do renderowania komponentu niestandardowego do 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 
});