Html-react-parser: Kesalahan: img adalah tag elemen batal dan tidak boleh memiliki `children` atau menggunakan `dangerouslySetInnerHTML`

Dibuat pada 26 Agu 2016 · 14Komentar · Sumber: remarkablemark/html-react-parser

Hai!

Plugin yang bagus, menurut saya ini akan sangat membantu untuk apa yang sedang saya kerjakan.

Saya perhatikan bahwa mengurai img -element menyebabkan kesalahan di atas. Ini mungkin juga berlaku untuk elemen apa pun yang seharusnya tidak memiliki elemen anak.

Solusi sementara adalah dengan menggunakan sesuatu seperti ini:

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

Sumber

poacher2k

Komentar yang paling membantu

Saya mengalami masalah ini karena saya mencoba menambahkan anak-anak ke tag img...

Sshetty2 pada 28 Mei 2019

👍2 😕1

Semua 14 komentar

Terima kasih telah memberi tahu saya. Apakah Anda memiliki contoh sehingga saya dapat mereproduksi kesalahan ini?

remarkablemark pada 26 Agu 2016

Hai!
Anda dapat mereproduksi ini dengan yang berikut:
ReactDOM.render(Parser('<div><img src="" alt=""/></div>'), document.getElementById('root'));

poacher2k pada 29 Agu 2016

Luarbiasa, terimakasih!

poacher2k pada 29 Agu 2016

@poacher2k Terima kasih untuk contohnya. Saya telah memeriksa bug dan melakukan perbaikan di #16.

Coba npm update html-react-parser atau npm install [email protected] dan beri tahu saya jika ini menghilangkan kesalahan untuk Anda.

remarkablemark pada 29 Agu 2016

😄1 👍1

Itu memperbaikinya, terima kasih lagi! Senang melihat Anda juga menambahkan cek untuk elemen batal lainnya!

poacher2k pada 29 Agu 2016

Senang mendengar dan Anda sangat disambut! 👍

remarkablemark pada 29 Agu 2016

@remarkablemark Saya masih menghadapi masalah dan npm install [email protected] kode tidak diperbarui dalam versi ini.

vidit1 pada 5 Jan 2018

@vidit1 Bisakah Anda mengonfirmasi bahwa Anda menginstal versi latest ?

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

# or
npm i [email protected]

Kemudian verifikasi dengan melakukan:

npm ls html-react-parser

remarkablemark pada 5 Jan 2018

@remarkablemark Saya memperbarui versi terbaru html-react-parser dan masih menghadapi masalah ini. Ku elemen ada di dalam komponen material-ui.
<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>

blueskysmart pada 12 Jan 2018

@blueskysmart : Anda memiliki teks "Bootstrap" di dalam tag img Anda. Seperti yang dikatakan kesalahan, img adalah elemen batal, dan tidak dapat memiliki anak.

Lihat komentar @remarkablemark di bawah untuk panduan cara memperbaikinya.

poacher2k pada 12 Jan 2018

👍1

@blueskysmart Komentar yang dibuat oleh @poacher2k benar. Anda dapat melihat reproduksi kesalahan ini di biola ini .

remarkablemark pada 12 Jan 2018

Oke, saya mengerti. Terima kasih.

blueskysmart pada 22 Jan 2018

Kesalahan ini juga muncul jika Anda hanya mencoba menguraikan ini:
<img src="img.jpg".>

Untuk membuatnya berfungsi, bungkus dalam div: