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

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

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

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

Ответ 1

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

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

renderToString()

renderToStaticMarkup()

Ответ 2

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

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

Ответ 3

рендеринг с использованием html снизит производительность/нарушит принцип действия виртуального dom. Маркер отображает html-контент, состояние которого мгновенно обновляется, что, как и все, ухудшает производительность.. Любое лучшее предложение, нам может потребоваться улучшение из листовки; (