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

Question

我正在使用Leaflet开发一个应用程序（通过react-
leaflet
）。传单直接操作DOM。react-
leaflet库并没有改变它，它只是为您提供了React组件，您可以使用它们以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 docs：

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

这是一个严格的规则，还是仅意味着劝阻人们规避ReactDOM对DOM的有效管理？

我想不出另一种（更好的）方式来实现自己的目标。任何意见或想法将不胜感激。

Answer 1

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

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

• renderToString（）
• renderToStaticMarkup（）