كيفية عرض HTML في React

اكتشف كيفية عرض سلسلة HTML في DOM دون هروب ، باستخدام React

واجهت هذه المشكلة - كنت بحاجة إلى إضافة سلسلة HTML في تطبيق React ، قادمة من محرر WYSIWYG ، ولكن ببساطة أضيف{myString}الىJSXكان يتخطى HTML .. لذلك تم عرض علامات HTML للمستخدم!

كيف حللتها؟ رأيت حلين بشكل أساسي. الأول مواطن ، والثاني يتطلب مكتبة.

الحل الأول: استخدامdangerouslySetInnerHTML

يمكنك استعمال الdangerouslySetInnerHTMLعلى عنصر HTML لإضافة سلسلة HTML داخل محتواها:

<div
  dangerouslySetInnerHTML={{
    __html: props.house.description
  }}></div>

تذكر أنه يسمىبشكل خطيرلسبب ما. لا يتم تخطي HTML على الإطلاق في هذه الحالة ، وقد يتسبب ذلك في حدوث ذلكXSSمسائل.

ولكن هناك حالات استخدام جيدة لهذا الغرض.

الحل الثاني: استخدم مكتبة تابعة لجهة خارجية

هناك العديد من المكتبات التي تقوم بتنفيذ الوظائف التيdangerouslySetInnerHTMLيقدم بطريقة أبسط.

واحد منهم هوreact-html-parserمكتبة.

راجع المكتبة على GitHub:https://github.com/wrakky/react-html-parser

تحذير: في وقت كتابة هذا التقرير ، لم يتم تحديثه في العامين الماضيين ، لذلك قد تنكسر الأمور في المستقبل. عملت معي.

أي واحد يستخدم؟

يمكنك البحث عن مكتبات أخرى مماثلة ، لكن في النهاية اخترت استخدام ملفdangerouslySetInnerHTMLطريق.

كان هذا الاسم ذو المظهر الخطير بمثابة تذكير مضمّن للانتباه عند وضع علامات HTML في القائمة البيضاء بشكل صحيح ، حيث سمحت للمستخدم بالدخول إلى سلسلة HTML هذه.

تحميل مجانيكتيب رد الفعل


المزيد من البرامج التعليمية للتفاعل: