प्रतिक्रिया

Question

में एचटीएमएल टिप्पणियां डालें क्या प्रतिक्रिया जेएसएक्स में एचटीएमएल टिप्पणी नोड डालने का कोई तरीका है, वैसे ही आप एक घटक या डोम नोड डाल सकते हैं?

जैसे, की तरह कुछ:

React.createElement(Comment, {}, "comment text"); 

प्रस्तुत करना होगा करने के लिए:

<!-- comment text --> 

विचार है कि टिप्पणी पृष्ठ पर दिखाई है, इसलिए { /* this /* } मेरे सवाल का जवाब नहीं है।

ध्यान दें कि निम्नलिखित संबंधित सवाल एक जवाब नहीं है और कुछ कुछ अलग के लिए पूछता है:

How to render a HTML comment in React?

मैं सिर्फ एक टिप्पणी नोड प्रस्तुत करना चाहते हैं। मैंने देखा है कि रिएक्ट इंफ्रास्ट्रक्चर स्वयं एचटीएमएल टिप्पणियों को प्रस्तुत करता है, इसलिए शायद ऐसा करने के लिए एक (थोड़ा हैकी?) तरीका भी है।

Answer 1

केवल एक चीज जिसे मैं सोच सकता हूं, घटक डीआईडीमाउंट पर डीओएम में हेरफेर करना होगा और वहां अपनी टिप्पणी जोड़नी होगी, लेकिन फिर प्रतिक्रिया उस डीओएम मैनिपुलेशन को संभालने में सक्षम नहीं होगी, इसलिए इससे कुछ समस्याएं हो सकती हैं?

var HTMLComment = React.createClass({ 

     componentDidMount: function(){ 
     var htmlComment = "<!--" + this.props.comment + "-->"; 
      this.span.innerHTML = htmlComment; 
     }, 

     render: function(){ 
     return (
      <span ref={(span) => this.span = span} ></span> 
     ) 
     } 
    }) 

Answer 2

एक अन्य विकल्प का उपयोग करने के dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{ __html: '<!-- comment text -->' }} /> 

dangerouslySetInnerHTML ब्राउज़र डोम में innerHTML उपयोग करने के लिए की प्रतिक्रिया प्रतिस्थापन है। सामान्य रूप से, कोड से एचटीएमएल सेट करना खतरनाक है क्योंकि अनजाने में अपने उपयोगकर्ताओं को क्रॉस-साइट स्क्रिप्टिंग (एक्सएसएस) हमले में उजागर करना आसान है। इसलिए, आप सीधे प्रतिक्रिया से HTML सेट कर सकते हैं, लेकिन आपको खतरनाक रूप से SetInnerHTML टाइप करना होगा और एक ऑब्जेक्ट को __html कुंजी से पास करना होगा, यह याद दिलाने के लिए कि यह खतरनाक है।

https://facebook.github.io/react/docs/dom-elements.html#dangerouslysetinnerhtml