Html-react-parser: كيف تتعامل مع! صفات مهمة في الاسلوب؟

تم إنشاؤها على ١٨ فبراير ٢٠٢١  ·  8تعليقات  ·  مصدر: remarkablemark/html-react-parser

لدي موقف مؤسف حيث أحصل أحيانًا على علامات html من cms ، والتي تتضمن أنماطًا مضمنة مع! المهم فيها. لا بد لي من تحليلها وعرضها في تطبيق React.

لا يمكنني فعل أي شيء حيال ذلك ، وكل الأنماط المرتبطة بها يتم تجريدها من خلال React.
هل هناك طريقة ما يمكنني من خلالها استخدام محلل html-reaction-parser للاحتفاظ بهذه الأنماط ، حتى تظل في الجسم؟
آسف إذا لم يكن هذا هو المكان المناسب للسؤال عن هذا ، فلا تتردد في إغلاق هذه المشكلة في هذه الحالة.

شكرا!

question

ال 8 كومينتر

linkurzweg قد لا تحتاج إلى html-react-parser . انظر كمان . فقط كن على علم بنقاط ضعف XSS إذا كنت تستخدم SetInnerHTML بشكل خطير .

remarkablemark آه ، لم أفكر حتى بشكل خطير في
لا يوجد خطر حقيقي على XSS في حالتي ، لذا يجب أن يكون ذلك جيدًا.

المشكلة هي أنني ما زلت بحاجة إلى تشغيل كل شيء من خلال html-reaction-parser ، لأن الجسم يمكن أن يحتوي على عناصر أحتاج إلى استبدالها ببعض مكونات React. فقط إذا كان للعنصر سمة نمط يمكنني عرضها كما هي.
هل هناك أي طريقة يمكنني من خلالها تحويل domNode مرة أخرى إلى سلسلة عند التحليل؟

شكرا جزيلا!

linkurzweg يمكنك تمرير domNode الخاص بك في domToReact() وسيظهره كعنصر React. انظر استبدال الأمثلة.

remarkablemark شكرا مرة أخرى! أعلم ذلك ، لكنني لا أرى كيف سيساعد ذلك في حالتي؟
ما زلت بحاجة إلى إعادة domNode إلى سلسلة يمكنني استخدامها بشكل خطير مع SetInnerHTML أم أنني لا أحصل على شيء ما؟

linkurzweg أنا لا أتابع حالة الاستخدام الخاصة بك. يمكنك تقديم مثال باستخدام CodeSandbox ، JSFiddle ، أو Repl.it ؟

remarkablemark انظر كمان هنا: https://jsfiddle.net/9bezs1rt/.
إذن ، الأمر على هذا النحو: أحصل على سلسلة واحدة ضخمة تحتوي على كل لغة تأشير النص الفائق بداخلها ، والتي تحتاج إلى تحليل بطريقة ما (يمكن أن تحتوي على علامات نصية ، وإطارات مضمنة ، ومضمنات وسائط اجتماعية ، إلخ). أحتاج إلى تكرار جميع عقد dom والتعامل مع الكثير من الحالات المختلفة.

إذا كانت عقدة dom تحتوي على بعض الأنماط المضمنة المرفقة بها ، يمكنني أن أفترض أنني لست بحاجة إلى استبدالها ببعض مكونات React وأريد فقط تمريرها ، بما في ذلك الأنماط التي لها أهمية! وللأسف تضيع هذه الأشياء.

linkurzweg شكرًا لك على إنشاء الكمان. لذا فإن سبب عدم عرض الأنماط بشكل صحيح هو أن الأنماط المضمنة لا تحتاج إلى !important .

بعد إزالة !important ، قمت بعمل إظهار للحد الأحمر. انظر الكمان المحدث.

remarkablemark بالطبع ، سخيف لي! يمكن أن يكون هناك بعض علامات الأنماط الأخرى مع! مهم داخل سلسلة html (كلها فوضوية للغاية) والتي قد تتعارض مع الأنماط المضمنة. لكن يمكنني إزالة! المهم هناك أيضًا ، لذا يجب أن يكون جيدًا. : D شكرا جزيلا للنظر في هذا ومساعدتكم!

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات