क्या उन क्षेत्रों में ब्राउज़र में ReactDOMServer.renderToString का उपयोग करना ठीक है जहां प्रतिक्रिया सीधे डोम का प्रबंधन नहीं कर रही है?

Question

मैं Leaflet (react-leaflet के माध्यम से) का उपयोग कर एक ऐप पर काम कर रहा हूं। पत्रक सीधे डोम में हेरफेर करता है। प्रतिक्रिया-पुस्तिका पुस्तकालय उसमें बदलाव नहीं करता है, यह आपको केवल प्रतिक्रिया घटक देता है जिसका उपयोग आप अपने पत्रक मानचित्र को एक प्रतिक्रिया-अनुकूल तरीके से नियंत्रित करने के लिए कर सकते हैं।

इस ऐप में, मैं कस्टम मैप मार्करों का उपयोग करना चाहता हूं जो कुछ साधारण तत्वों वाले divs हैं। पत्रक में ऐसा करने का तरीका अपने मार्कर की icon संपत्ति को DivIcon पर सेट करना है, जिसमें आप अपना कस्टम HTML सेट कर सकते हैं। आप HTML आइकन युक्त स्ट्रिंग में DivIcon की html प्रॉपर्टी सेट करके उस आंतरिक HTML को सेट करते हैं। मेरे मामले में, मैं चाहता हूं कि 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 के अनुसार:

यह [रेंडर टॉस्ट्रिंग] केवल सर्वर पर उपयोग किया जाना चाहिए।

क्या यह एक सख्त नियम है, या क्या यह केवल लोगों को डीओएम के रिएक्टडॉम के कुशल प्रबंधन को रोकने से रोकने के लिए है?

मैं जो कुछ भी कर रहा हूं उसे पूरा करने के लिए मैं एक और (बेहतर) तरीका नहीं सोच सकता। किसी भी टिप्पणी या विचारों की सराहना की जाएगी।

Answer 1

नई प्रलेखन के अनुसार: https://reactjs.org/docs/react-dom-server.html

निम्न विधियों दोनों सर्वर और ब्राउज़र में इस्तेमाल किया जा सकता वातावरण:

• renderToString()
• renderToStaticMarkup()

Answer 2

मुझे पता है कि यह बहुत पुराना सवाल है, लेकिन चूंकि इसका उत्तर नहीं दिया गया है, इसलिए मैं अपने विचार साझा करना चाहता था।

मैं एक ही बात, 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 
});