عرض سلاسل HTML بشكل آمن كـ HTML

في هذا السيناريو، تنشأ المشكلة عند محاولة عرض سلسلة عادية من محتوى HTML، ولكنها بدلاً من ذلك يظهر كسلسلة دون أن يتم تفسيره على أنه HTML. تتم مواجهة هذا عادةً عندما تكون الخاصية المستخدمة في DangerlySetInnerHTML عبارة عن كائن وليس سلسلة.

لحل هذه المشكلة، تأكد من أن الخاصية this.props.match.description عبارة عن سلسلة. إذا لم يكن الأمر كذلك، قم بتحويله إلى HTML قبل تعيينه إلى الخاصية.

التعامل مع كيانات HTML

تنشأ تعقيدات إضافية عند التعامل مع كيانات HTML. في مثل هذه الحالات، ستحتاج إلى فك تشفير الكيانات قبل تمريرها إلى DangerlySetInnerHTML.

مثال التعليمات البرمجية

ضع في الاعتبار رمز المثال التالي:

يمتد تطبيق الفصل React.Component { منشئ () { ممتاز()؛ هذه الحالة = { description: '

فرصتنا:

'، }; } htmlديكود(الإدخال) { const e = document.createElement('div'); e.innerHTML = input; إرجاع e.childNodes.length === 0؟ '' : e.childNodes[0].nodeValue; } يجعل() { يعود ( ); } } ReactDOM.render(, document.getElementById('root'));

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'));