HTML स्ट्रिंग्स को HTML के रूप में सुरक्षित रूप से प्रस्तुत करना

इस परिदृश्य में, समस्या तब उत्पन्न होती है जब HTML सामग्री की एक सामान्य स्ट्रिंग को प्रस्तुत करने का प्रयास किया जाता है, लेकिन यह इसके बजाय HTML के रूप में व्याख्या किए बिना एक स्ट्रिंग के रूप में प्रकट होता है। यह आमतौर पर तब सामने आता है जब खतरनाक तरीके से SetInnerHTML में उपयोग की जा रही संपत्ति एक स्ट्रिंग के बजाय एक ऑब्जेक्ट है।

इसे हल करने के लिए, सुनिश्चित करें कि this.props.match.description संपत्ति एक स्ट्रिंग है। यदि ऐसा नहीं है, तो इसे संपत्ति को सौंपने से पहले इसे HTML में परिवर्तित करें।

Handling HTML Entities

HTML इकाइयों के साथ व्यवहार करते समय अतिरिक्त जटिलताएँ उत्पन्न होती हैं। ऐसे मामलों में, आपको इकाइयों को खतरनाक तरीके से SetInnerHTML पर भेजने से पहले उन्हें डीकोड करना होगा।

उदाहरण कोड

निम्नलिखित उदाहरण कोड पर विचार करें:

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      description: '
Our Opportunity:
',
    };
  }

  htmlDecode(input) {
    const e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? '' : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      

    );
  }
}

ReactDOM.render(, document.getElementById('root'));

इस उदाहरण में, विवरण प्रॉपर्टी में HTML इकाइयां () शामिल हैं। इसे सही ढंग से प्रस्तुत करने के लिए, HTML को खतरनाक रूप से SetInnerHTML में पास करने से पहले इन इकाइयों को डीकोड करने के लिए htmlDecode फ़ंक्शन का उपयोग किया जाता है।