Html-react-parser: خطأ: تعد img علامة عنصر باطلة ويجب ألا تحتوي على "أطفال" ولا يجب أن تستخدم "seriouslySetInnerHTML"

تم إنشاؤها على ٢٦ أغسطس ٢٠١٦ · 14تعليقات · مصدر: remarkablemark/html-react-parser

أهلا!

مكون إضافي رائع ، أعتقد حقًا أن هذا سيكون مفيدًا لما أعمل عليه.

لقد لاحظت أن تحليل أي عنصر img يسبب الخطأ أعلاه. قد ينطبق هذا أيضًا على أي عنصر لا يجب أن يحتوي على عناصر فرعية.

الحل المؤقت هو استخدام شيء مثل هذا:

const parserConfig = {
    replace: domNode => {
        if(domNode.type === DOM_TYPE_TAG && domNode.name === 'img') {
            return <img src={domNode.attribs.src} alt={domNode.attribs.alt} className={domNode.attribs.class} />;
        }
    }
};

bug

مصدر

poacher2k

التعليق الأكثر فائدة

كنت أواجه هذه المشكلة لأنني كنت أحاول إضافة أطفال إلى علامة img ...

Sshetty2 في ٢٨ مايو ٢٠١٩

👍2 😕1

ال 14 كومينتر

شكرا على إعلامي. هل لديك مثال حتى أتمكن من إعادة إنتاج هذا الخطأ؟

remarkablemark في ٢٦ أغسطس ٢٠١٦

أهلا!
يمكنك إعادة إنتاج هذا باستخدام ما يلي:
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));

poacher2k في ٢٩ أغسطس ٢٠١٦

رائع شكرا لك!

poacher2k في ٢٩ أغسطس ٢٠١٦

@ poacher2k شكرا على المثال. لقد بحثت في الخطأ وقمت بإصلاحه في رقم 16.

جرب npm update html-react-parser أو npm install [email protected] وأخبرني إذا كان هذا يزيل الخطأ من أجلك.

remarkablemark في ٢٩ أغسطس ٢٠١٦

😄1 👍1

هذا أصلحها ، شكرا مرة أخرى! يسعدني أن أراك أيضًا قد أضفت عمليات فحص لعناصر الفراغ الأخرى!

poacher2k في ٢٩ أغسطس ٢٠١٦

من الرائع سماع ذلك وأنت مرحب بك جدًا! 👍

remarkablemark في ٢٩ أغسطس ٢٠١٦

remarkablemark ما زلت أواجه المشكلة ولا يتم تحديث رمز npm [email protected] في هذا الإصدار.

vidit1 في ٥ يناير ٢٠١٨

@ vidit1 هل يمكنك تأكيد تثبيت الإصدار latest ؟

npm i html-react-parser<strong i="8">@latest</strong>

# or
npm i [email protected]

ثم تحقق من خلال القيام بما يلي:

npm ls html-react-parser

remarkablemark في ٥ يناير ٢٠١٨

remarkablemark لقد قمت بتحديث أحدث إصدار html- عنصر داخل مكون مادة واجهة المستخدم.
<Drawer> <div className="alert" role="alert"> <img src="https://getbootstrap.com/assets/brand/bootstrap-solid.svg" width="30" height="30" className="d-inline-block align-top" alt=""> Bootstrap </img> </div> </Drawer>