Можно ли использовать ReactDOMServer.renderToString в браузере в тех областях, где React напрямую не управляет DOM?

Question

Я работаю над приложением, используя Leaflet (через react-leaflet). Листовка непосредственно манипулирует DOM. Библиотека реакций-ответчиков не изменяет этого, она просто дает вам компоненты React, которые вы можете использовать для управления вашей лифлетной картой в соответствии с реакцией.

В этом приложении я хочу использовать пользовательские маркеры карт, которые являются divs, содержащими несколько простых элементов. Способ сделать это в Leaflet - установить свойство вашего маркера icon на DivIcon, в котором вы можете установить свой собственный HTML. Вы установили этот внутренний HTML, установив для свойства Div12con html строку, содержащую 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} /> 
    ) 
    } 
} 

Однако, в соответствии с React docs:

Этот [renderToString] должен использоваться только на сервере.

Это строгое правило, или оно предназначено только для того, чтобы отговорить людей от обхода эффективного управления ReactDOM DOM?

Я не могу думать о другом (лучшем) способе выполнить то, что мне нужно. Любые комментарии или идеи были бы весьма признательны.

Answer 1

в соответствии с новой документации: https://reactjs.org/docs/react-dom-server.html

следующие методы могут быть использованы как в сервере и браузере среды:

• renderToString()
• renderToStaticMarkup()

Answer 2

Я знаю, что это слишком старый вопрос, но поскольку на него не ответили, я хотел поделиться своими мыслями.

Я использовал то же самое, renderToString, но документация не рекомендует использовать его на стороне клиента, я достиг его другим способом, с помощью render метода, react-dom «S, чтобы сделать пользовательский компонент в 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 
});