在React不直接管理DOM的地方，在浏览器中使用ReactDOMServer.renderToString可以吗？
我正在开发一个使用Leaflet (通过react-leaflet)的应用程序。Leaflet直接操作DOM。react-leaflet库不会改变这一点，它只是为您提供了React组件，您可以使用这些组件以一种对React友好的方式控制您的Leaflet地图。
在这个应用程序中，我想使用自定义地图标记，它是包含一些简单元素的div。在Leaflet中实现这一点的方法是将标记的icon属性设置为一个DivIcon，您可以在其中设置您的自定义超文本标记语言。您可以通过将DivIcon的html属性设置为包含该HTML的字符串来设置该内部HTML。在我的例子中，我希望从React组件呈现HTML。
为此，似乎正确的方法是使用ReactDOMServer.renderToString()将我想要的地图标记内的组件呈现为一个字符串，然后将其设置为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的有效管理？
我想不出另一种(更好的)方法来完成我想要的东西。任何意见或想法都将不胜感激。
回答 4
Stack Overflow用户
发布于 2018-02-01 23:02:54
根据新的文档：https://reactjs.org/docs/react-dom-server.html
在服务器和浏览器环境中都可以使用以下方法：
- renderToString()
- renderToStaticMarkup()
Stack Overflow用户
发布于 2017-10-01 08:52:25
我知道这是一个太老的问题，但是因为它还没有得到回答，所以我想分享我的想法。
我使用的是相同的东西，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
});Stack Overflow用户
发布于 2020-10-31 00:44:20
正如托马斯已经说过的，是的，您可以在客户端使用renderToString。不过，为了清楚起见，您需要在客户机上导入ReactDOMServer，这看起来可能有悖于直觉，但似乎是正确的。示例(在客户端)：
import React from 'react';
import ReactDOMServer from 'react-dom/server';
const MyComp = (props) => {
const html = ReactDOMServer.renderToString(<div>{someFunc(props)}</div>);
// do something with your html, then
return <div dangerouslySetInnerHTML={{__html: html}}></div>;
};https://stackoverflow.com/questions/37079847
复制相似问题