在React不直接管理DOM的区域中,在浏览器中使用ReactDOMServer.renderToString是否可以？

Question

我正在使用Leaflet(通过react-leaflet)开发应用程序.Leaflet直接操作DOM.react-leaflet库不会改变它,它只是为您提供了React组件,您可以使用这些组件以反应友好的方式控制Leaflet映射.

在这个应用程序中,我想使用自定义地图标记,这些标记是包含一些简单元素的div.在Leaflet中执行此操作的方法是将标记的icon属性设置为DivIcon,您可以在其中设置自定义HTML.您可以通过将DivIcon的html属性设置为包含HTML的字符串来设置内部HTML.就我而言,我希望从React组件呈现HTML.

为了做到这一点,似乎正确的方法是使用ReactDOMServer.renderToString()在地图标记内将我想要的Component渲染成一个字符串,然后我将其设置为htmlDivIcon 的属性:

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文档:

此[renderToString]应仅在服务器上使用.

这是一个严格的规则,还是仅仅是为了阻止人们绕过ReactDOM对DOM的有效管理？

我无法想到另一种(更好的)方式来实现我所追求的目标.任何评论或想法将不胜感激.

Answer 1

根据新文件:https://reactjs.org/docs/react-dom-server.html

可以在服务器和浏览器环境中使用以下方法:

• renderToString()
• renderToStaticMarkup()

Answer 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
});