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

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

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

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

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

22
leaflet react-dom reactjs

2 ответов

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

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

  • renderToString ()
  • renderToStaticMarkup ()
6

я использовал то же самое, renderToString, но поскольку документация рекомендует не использовать его на стороне клиента, я достиг этого другим способом, используя react-dom ' s 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