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

Question

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

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

为了做到这一点，正确的方法似乎是使用 ReactDOMServer.renderToString() 将我想要在 map 标记内的组件渲染为字符串，然后我将其设置作为 DivIcon 的 html 属性:

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 :

This [renderToString] should only be used on the server.

这是一个严格的规则，还是只是为了阻止人们规避 ReactDOM 对 DOM 的高效管理？

我想不出另一种(更好的)方法来完成我所追求的目标。任何评论或想法将不胜感激。

Answer 1

根据新文档:https://react.dev/reference/react-dom/server

The following methods can be used in both the server and browserenvironments:

• renderToString()
• renderToStaticMarkup()