Html-react-parser: Bagaimana menangani !important dalam atribut gaya?

Dibuat pada 18 Feb 2021  ·  8Komentar  ·  Sumber: remarkablemark/html-react-parser

Saya memiliki situasi yang tidak menguntungkan bahwa saya terkadang mendapatkan tag html dari cms, yang menyertakan gaya sebaris dengan !important di dalamnya. Saya harus menguraikannya dan merendernya di aplikasi React.

Tidak ada yang bisa saya lakukan tentang itu dan semua gaya dengan !important yang melekat padanya dihilangkan oleh React.
Apakah ada cara saya bisa menggunakan html-react-parser untuk mempertahankan gaya itu, sehingga mereka akan tetap berada di dalam tubuh?
Maaf jika ini bukan tempat yang tepat untuk menanyakan hal ini, jangan ragu untuk menutup masalah ini dalam hal ini.

Terima kasih!

question

Semua 8 komentar

@linkurzweg Anda mungkin tidak perlu html-react-parser . Lihat biola . Waspadai kerentanan XSS jika Anda menggunakan HazardlySetInnerHTML .

@remarkablemark Ah, saya bahkan tidak memikirkan
Tidak ada risiko nyata untuk XSS dalam kasus saya, jadi itu akan baik-baik saja.

Masalahnya adalah, saya masih harus menjalankan semuanya melalui html-react-parser, karena body dapat berisi elemen yang harus saya ganti dengan beberapa komponen React. Hanya jika elemen tersebut memiliki atribut gaya, saya dapat merendernya apa adanya.
Apakah ada cara saya dapat mengonversi domNode kembali ke string saat parsing?

Terima kasih banyak!

@linkurzweg Anda dapat meneruskan domNode Anda di domToReact() dan itu akan menjadikannya sebagai elemen Bereaksi. Lihat contoh ganti .

@remarkablemark Terima kasih lagi! Saya tahu itu, tetapi saya tidak melihat bagaimana itu akan membantu dalam kasus saya?
Saya masih perlu mengembalikan domNode ke string yang dapat saya gunakan dengan HazardlySetInnerHTML atau apakah saya tidak mendapatkan sesuatu?

@linkurzweg Saya tidak mengikuti kasus penggunaan Anda. Bisakah Anda memberikan contoh menggunakan CodeSandbox , JSFiddle , atau Repl.it ?

@remarkablemark lihat biola di sini: https://jsfiddle.net/9bezs1rt/.
Jadi, seperti ini: Saya mendapatkan satu string besar dengan semua html di dalamnya, yang perlu diuraikan dalam beberapa cara (dapat berisi tag skrip, iframe, penyematan media sosial, dll.). Saya perlu mengulangi semua node dom dan menangani banyak kasus berbeda.

Jika simpul dom memiliki beberapa gaya sebaris yang melekat padanya, saya dapat berasumsi bahwa saya tidak perlu menggantinya dengan beberapa komponen React dan saya hanya ingin melewatinya, termasuk gaya yang memiliki !penting. Dan sayangnya mereka tersesat.

@linkurzweg Terima kasih telah membuat biola. Jadi alasan mengapa gaya tidak dirender dengan benar adalah karena gaya sebaris tidak memerlukan !important .

Setelah menghapus !important , saya membuat tampilan perbatasan merah. Lihat biola yang diperbarui.

@remarkablemark Tentu saja, konyol saya! Mungkin ada beberapa tag gaya lain dengan !important di dalam string html (semuanya sangat berantakan) yang mungkin berbenturan dengan gaya sebaris. Tapi saya bisa menghapus !important di sana juga, jadi seharusnya tidak masalah. :D Terima kasih banyak untuk melihat ini dan bantuan Anda!

Apakah halaman ini membantu?
0 / 5 - 0 peringkat