عرض HTML الخام باستخدام React: نهج أكثر أمانًا

في React، قد يكون عرض HTML الخام مهمة معقدة. على الرغم من أن الطريقة التقليدية لاستخدام DangerlySetInnerHTML كانت تعمل في الإصدارات السابقة، فقد تم إهمالها منذ ذلك الحين بسبب مخاوف أمنية. ومع ذلك، هناك الآن طرق أكثر أمانًا متاحة.

خيارات العرض الآمن

للحصول على عرض HTML أكثر أمانًا، لديك أربعة خيارات أساسية:

1. Unicode: احفظ ملفك بتنسيق UTF-8 واضبط مجموعة الأحرف على UTF-8. استخدم أحرف Unicode للرموز والكيانات الخاصة.
2. رقم Unicode: داخل سلسلة JavaScript، استخدم رقم Unicode للكيان المطلوب.
3. المصفوفة المختلطة: قم بدمج السلاسل وعناصر JSX داخل مصفوفة للعرض.
4. dangerouslySetInnerHTML: كملاذ أخير، استخدم بشكل خطيرSetInnerHTML من خلال إدخالات جديدة، مما يسمح بإدخال توجيهات آمنة ومباشرة.

مثال لاستخدام خيار المصفوفة المختلطة:

const markup = [
  'First ',
  ·,
  ' Second'
];

return 
{markup}
;

الاستنتاجعلى الرغم من أن عرض HTML الخام باستخدام React قد يكون ضروريًا في سيناريوهات معينة، إلا أنه من الضروري إعطاء الأولوية للسلامة. من خلال استخدام الطرق الأكثر أمانًا الموضحة أعلاه، يمكنك ضمان أمان وموثوقية تطبيقات React الخاصة بك مع الاستمرار في تلبية متطلبات العرض الخاصة بك.