Html-react-parser: Menggunakan ganti tidak dapat menggunakan gaya

Dibuat pada 4 Sep 2020 · 3Komentar · Sumber: remarkablemark/html-react-parser

Saya menggunakan penggantian berikut untuk mendapatkan pemberitahuan saat gambar dimuat:

replace: function(domNode) {
            if(domNode.name === 'img'){
                console.log('replacing img', domNode)
                return (
                    <img
                        {
                            ...domNode.attribs
                        }
                        onLoad={() => console.log('image loaded')}
                    />
                )
            }

        }

Jika gambar memiliki atribut gaya, ketika saya menambahkannya kembali melalui domNode.attribs itu menimbulkan kesalahan karena itu bukan objek gaya seperti yang diharapkan untuk jsx img. masih berupa tali. Bagaimana saya bisa mengubah atribut menjadi jsx yang siap untuk passthru di ganti?

question

Sumber

on2air

Komentar yang paling membantu

Ok terima kasih. Saya juga membuatnya bekerja dengan cara ini hanya dengan menambahkan ke domNode.attribs dan kemudian meneruskan ke domToReact

domNode.attribs['onLoad'] = this.imgLoad

return domToReact(domNode)

on2air pada 9 Sep 2020

👍2

Semua 3 komentar

gunakan attributesToProps

cbbfcd pada 9 Sep 2020

Ok terima kasih. Saya juga membuatnya bekerja dengan cara ini hanya dengan menambahkan ke domNode.attribs dan kemudian meneruskan ke domToReact

domNode.attribs['onLoad'] = this.imgLoad

return domToReact(domNode)

on2air pada 9 Sep 2020

👍2

attributesToProps sekarang diekspor dalam 0.14.0 . Terima kasih @cbbfcd telah membuat perubahan!

npm :

npm install [email protected]

Benang :

yarn add [email protected]

Penggunaan:

import React from 'react';
import parse, { attributesToProps } from 'html-react-parser';

const html = `
  <hr class="prettify" style="background:#fff;text-align:center" />
`;

const options = {
  replace: node => {
    if (node.attribs && node.name === 'hr') {
      const props = attributesToProps(node.attribs);
      return <hr {...props} />;
    }
  }
};