首页 文章

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

提问于
浏览
22

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

在这个应用程序中,我想使用自定义 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

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

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

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

2 回答

  • 6

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

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

  • 4

    我知道这是一个太老的问题,但由于没有得到回答,我想分享我的想法 .

    我正在使用相同的东西, renderToString ,但由于文档建议不要在客户端使用它,我通过使用 react-domrender 方法将自定义组件渲染为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
    });
    

相关问题