我正在使用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 回答
根据新文件:https://reactjs.org/docs/react-dom-server.html
我知道这是一个太老的问题,但由于没有得到回答,我想分享我的想法 .
我正在使用相同的东西,
renderToString
,但由于文档建议不要在客户端使用它,我通过使用react-dom
的render
方法将自定义组件渲染为div,以另一种方式实现了它