blocks|key|2665722|text|我知道这是一个太老的问题，但是因为它还没有得到回答，所以我想分享我的想法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2665723|我使用的是相同的东西，renderToString，但是文档建议不要在客户端使用它，我用另一种方式实现了它，使用react-dom的render方法将定制组件呈现到div中。|offset|length|style|CODE|2665724|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
});|code-block|syntax|javascript|2665725|entityMap^0|0|B|E|1K|9|1U|6|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@$D|Q|E|R|F|G]|$D|S|E|T|F|G]|$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|N|$]]

I know it is too old question, but since it has not been answered I wanted to share my thoughts.

I was using the same thing, <code>renderToString</code>, but as the documentation recommends not to use it on client-side, I achieved it in another way, by using the <code>react-dom</code>'s <code>render</code> method to render the custom component into div

<pre><code>var myDiv = document.createElement('div');

ReactDOM.render(
 &lt;MarkerContents data={this.props.data} /&gt;,
 myDiv
);

var myIcon = L.divIcon({ 
 iconSize: new L.Point(50, 50), 
 html: myDiv.innerHTML
});
</code></pre>

blocks|key|114950|text|根据新的文档：https://reactjs.org/docs/react-dom-server.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|114951|114952|在服务器和浏览器环境中都可以使用以下方法：|blockquote|114953|114954|114955|114956|renderToString()|unordered-list-item|114957|renderToStaticMarkup()|114958|114959|entityMap|0|LINK|mutability|MUTABLE|url|https://reactjs.org/docs/react-dom-server.html^0|7|1A|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|-4|5|6|7|12|8|@]|9|@]|C|$]]|$1|E|3|F|5|G|7|13|8|@]|9|@]|C|$]]|$1|H|3|-4|5|6|7|14|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|15|8|@]|9|@]|C|$]]|$1|J|3|-4|5|6|7|16|8|@]|9|@]|C|$]]|$1|K|3|L|5|M|7|17|8|@]|9|@]|C|$]]|$1|N|3|O|5|M|7|18|8|@]|9|@]|C|$]]|$1|P|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1A|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

According to the new documentation: <a href="https://reactjs.org/docs/react-dom-server.html" rel="noreferrer">https://reactjs.org/docs/react-dom-server.html</a>

<blockquote>
 The following methods can be used in both the server and browser
 environments:
 
 <ul>
 <li>renderToString()</li>
 <li>renderToStaticMarkup()</li>
 </ul>
</blockquote>

blocks|key|114979|text|正如托马斯已经说过的，是的，您可以在客户端使用renderToString。不过，为了清楚起见，您需要在客户机上导入ReactDOMServer，这看起来可能有悖于直觉，但似乎是正确的。示例(在客户端)：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|114980|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>;
};|code-block|syntax|javascript|114981|entityMap^0|N|E|1M|E|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|S|8|@]|D|@]|E|$]]]|L|$]]

As Thomas already said, yes, you can use <code>renderToString</code> on the client. Just to be clear though, you will need to import <code>ReactDOMServer</code> on the client, which may seem counter-intuitive but appears to be correct. Example (on the client):
<pre><code>import React from 'react';
import ReactDOMServer from 'react-dom/server';

const MyComp = (props) =&gt; {
 const html = ReactDOMServer.renderToString(&lt;div&gt;{someFunc(props)}&lt;/div&gt;);
 // do something with your html, then
 return &lt;div dangerouslySetInnerHTML={{__html: html}}&gt;&lt;/div&gt;;
};
</code></pre>

blocks|key|117966|text|我在leaflet上遇到了完全相同的问题，最终通过解决了这个问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|117967|import+React,+{+useEffect,+useMemo,useState+}+from+"react";
import+ReactDOM+from+"react-dom";
import+{+useLeafletContext+}+from+"@react-leaflet/core";
import+*+as+L+from+"leaflet";

/**
+*+@type+{+React.FC<{
+*++++positionX?:+number
+*++++positionY?:+number
+*++++width?:+number
+*++++height?:number
+*+}>+}
+*+*/
const+LeafletChild+=+({+children,+positionX=0,+positionY=0,+width,+height+})+=>+{
++const+context+=+useLeafletContext();
++const+[divElement]+=+useState(()+=>+document.createElement("div"));
++const+icon+=+useMemo(()+=>+L.divIcon({+iconSize:+new+L.Point(height,+width),+html:+divElement+}),+[height,width,+divElement]);
++const+marker+=+useMemo(()+=>+L.marker([0,0],+{+icon+}),+[icon]);
++useEffect(()=>{
++++marker.setLatLng([positionY,+positionX])
++},[positionY,positionX,+marker])

++useEffect(()+=>+{
++++const+container+=+context.layerContainer+%7C%7C+context.map;
++++container.addLayer(marker);
++++return+()+=>+container.removeLayer(marker);
++},+[context,+marker]);
++return+ReactDOM.createPortal(children,+divElement);
};|code-block|syntax|javascript|117968|在别的地方。|117969|<LeafletChild>
++<div+onClick={()=>setSomeBool(!someBool)}>
++++anything+you+want+here+like...{`${someBool}`}
++</div>
</LeafletChild>|117970|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

I had the exact same problem with leaflet and ended up solving the problem by <a href="https://reactjs.org/docs/portals.html" rel="nofollow noreferrer">thinking with portals</a>.
<pre class="lang-js prettyprint-override"><code>import React, { useEffect, useMemo,useState } from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;
import { useLeafletContext } from &quot;@react-leaflet/core&quot;;
import * as L from &quot;leaflet&quot;;

/**
 * @type { React.FC&lt;{
 * positionX?: number
 * positionY?: number
 * width?: number
 * height?:number
 * }&gt; }
 * */
const LeafletChild = ({ children, positionX=0, positionY=0, width, height }) =&gt; {
 const context = useLeafletContext();
 const [divElement] = useState(() =&gt; document.createElement(&quot;div&quot;));
 const icon = useMemo(() =&gt; L.divIcon({ iconSize: new L.Point(height, width), html: divElement }), [height,width, divElement]);
 const marker = useMemo(() =&gt; L.marker([0,0], { icon }), [icon]);
 useEffect(()=&gt;{
 marker.setLatLng([positionY, positionX])
 },[positionY,positionX, marker])

 useEffect(() =&gt; {
 const container = context.layerContainer || context.map;
 container.addLayer(marker);
 return () =&gt; container.removeLayer(marker);
 }, [context, marker]);
 return ReactDOM.createPortal(children, divElement);
};
</code></pre>
Somwhere else...
<pre class="lang-js prettyprint-override"><code>&lt;LeafletChild&gt;
 &lt;div onClick={()=&gt;setSomeBool(!someBool)}&gt;
 anything you want here like...{`${someBool}`}
 &lt;/div&gt;
&lt;/LeafletChild&gt;
</code></pre>

I'm working on an app using <a href="http://leafletjs.com/" rel="noreferrer">Leaflet</a> (via <a href="https://github.com/PaulLeCam/react-leaflet" rel="noreferrer">react-leaflet</a>). Leaflet directly manipulates the DOM. The react-leaflet library doesn't change that, it just gives you React components that you can use to control your Leaflet map in a React-friendly way.

In this app, I want to use custom map markers that are divs containing a few simple elements. The way to do that in Leaflet is to set your marker's <code>icon</code> property to a <a href="http://leafletjs.com/reference.html#divicon" rel="noreferrer">DivIcon</a>, in which you can set your custom HTML. You set that inner HTML by setting the DivIcon's <code>html</code> property to a string containing the HTML. In my case, I want that HTML to be rendered from a React component.

In order to do that, it seems like the correct approach is to use <code>ReactDOMServer.renderToString()</code> to render the Component that I want inside the map marker into a string, which I would then set as the <code>html</code> property of the DivIcon:

MyMarker.js:

<pre><code>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(&lt;MarkerContents data={this.props.data} /&gt;)
 const myDivIcon = divIcon({
 className: 'my-marker',
 html: markerContents
 })

 return (
 &lt;Marker
 position={this.props.position}
 icon={myDivIcon} /&gt;
 )
 }
}
</code></pre>

However, according to the <a href="https://facebook.github.io/react/docs/top-level-api.html#reactdomserver.rendertostring" rel="noreferrer">React docs</a>:

<blockquote>
 This [renderToString] should only be used on the server.
</blockquote>

Is this a strict rule, or is it only meant to dissuade people from circumventing ReactDOM's efficient management of the DOM?

I can't think of another (better) way to accomplish what I'm after. Any comments or ideas would be greatly appreciated.

Is it ok to use ReactDOMServer.renderToString in the browser in areas where React isn't directly managing the DOM?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我正在开发一个使用 (通过)的应用程序。Leaflet直接操作DOM。react-leaflet库不会改变这一点，它只是为您提供了React组件，您可以使用这些组件以一种对React友好的方式控制您的Leaflet地图。在这个应用程序中，我想使用自定义地图标记，它是包含一些简单元素的div。在Leaflet中实现这一点...

问在React不直接管理DOM的地方，在浏览器中使用ReactDOMServer.renderToString可以吗？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React不直接管理DOM的地方，在浏览器中使用ReactDOMServer.renderToString可以吗？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在React不直接管理DOM的地方，在浏览器中使用ReactDOMServer.renderToString可以吗？
EN