Untuk proyek TypeScript, Anda mungkin perlu memeriksa bahwa <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>3 adalah turunan dari <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>4 milik domhandler
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')_4
Jika Anda mengalami masalah, lihat contoh Create React App kami
mengganti elemen dan anak-anak
Ganti elemen dan anak-anaknya (lihat demo)
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')5
keluaran HTML
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')6
mengganti atribut elemen
Ubah atribut DOM menjadi properti React dengan <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>5
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')7
keluaran HTML
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')_8
mengganti dan menghapus elemen
Kecualikan elemen dari rendering dengan menggantinya dengan <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>6
const parse = require('html-react-parser'); parse('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')_9
keluaran HTML
npm install html-react-parser --save_0
perpustakaan
Opsi <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>7 menentukan perpustakaan UI. Pustaka default adalah Bereaksi
Untuk menggunakan Preact
npm install html-react-parser --save_1
Atau perpustakaan khusus
npm install html-react-parser --save_2
htmlparser2
<!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>8 opsi tidak berfungsi di sisi klien (browser) dan hanya berfungsi di sisi server (Node. js). Dengan mengesampingkan opsi <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>_8, rendering universal dapat rusak
Default dapat diganti di >=0. 12. 0
Untuk mengaktifkan
npm install html-react-parser --save_3
memangkas
Secara default, spasi putih dipertahankan
npm install html-react-parser --save_4
Tetapi elemen tertentu seperti // ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require('html-react-parser');_1 akan menghapus spasi kosong yang tidak valid
npm install html-react-parser --save_5
Untuk menghapus spasi, aktifkan opsi <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>0
npm install html-react-parser --save_6
Namun, spasi putih yang disengaja dapat dihilangkan
npm install html-react-parser --save_7
Migrasi
v3. 0. 0
domhandler telah ditingkatkan ke v5 sehingga beberapa opsi parser seperti // ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require('html-react-parser');3 telah dihapus
Selain itu, disarankan untuk memutakhirkan ke TypeScript versi terbaru
v2. 0. 0
Sejak v2. 0. 0, Internet Explorer (IE) tidak lagi didukung
v1. 0. 0
Proyek TypeScript perlu memperbarui jenis di v1. 0. 0
Untuk opsi yarn add html-react-parser_8, Anda mungkin perlu melakukan hal berikut
npm install html-react-parser --save_8
Sejak v1. 1. 1, Internet Explorer 9 (IE9) tidak lagi didukung
FAQ
Apakah XSS ini aman?
Tidak, pustaka ini tidak aman untuk XSS (skrip lintas situs). Lihat #94
Apakah HTML yang tidak valid dibersihkan?
Tidak, pustaka ini tidak membersihkan HTML. Lihat #124, #125, dan #141
Apakah yarn add html-react-parser_9 tag diuraikan?
Meskipun tag yarn add html-react-parser_9 dan kontennya dirender di sisi server, mereka tidak dievaluasi di sisi klien. Lihat #98
Atribut tidak dipanggil
Alasan mengapa atribut HTML Anda tidak dipanggil adalah karena penangan peristiwa sebaris (mis. g. , // ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require('html-react-parser');_7) diuraikan sebagai string daripada fungsi. Lihat #73
Parser melempar kesalahan
Jika parser menampilkan kesalahan, periksa apakah argumen Anda valid. Melihat
Apakah SSR didukung?
Ya, rendering sisi server di Node. js didukung oleh perpustakaan ini. Lihat demo
Elemen tidak disarangkan dengan benar
Jika elemen Anda disarangkan dengan tidak benar, periksa untuk memastikan bahwa markup HTML Anda valid. Penguraian HTML ke DOM akan terpengaruh jika Anda menggunakan sintaks penutup sendiri (// ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require('html-react-parser');8) pada elemen non-void
npm install html-react-parser --save_9
Lihat #158
Jangan ubah huruf besar-kecil tag
Tag menggunakan huruf kecil secara default. Untuk mencegah hal itu terjadi, lewati
yarn add html-react-parser0
Peringatan. Dengan mempertahankan kepekaan huruf besar-kecil pada tag, Anda mungkin mendapatkan peringatan rendering seperti
yarn add html-react-parser1
Lihat #62 dan contoh
Kesalahan TS. Properti 'attrib' tidak ada pada tipe 'DOMNode'
Kesalahan TypeScript terjadi karena // ES Modules import parse from 'html-react-parser'; // CommonJS const parse = require('html-react-parser');_9 perlu turunan dari <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>4 milik domhandler. Lihat atau #199
Dapatkah saya mengaktifkan <!-- HTMLReactParser depends on React --> <script src="//unpkg.com/react@18/umd/react.production.min.js"></script> <script src="//unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script> <script> window.HTMLReactParser(/* string */); </script>0 untuk elemen tertentu?
Ya, Anda dapat mengaktifkan atau menonaktifkan elemen tertentu menggunakan opsi. Lihat #205
Peringatan pembuatan paket web
Jika Anda melihat peringatan build Webpack
yarn add html-react-parser2Kemudian perbarui konfigurasi Webpack Anda ke
yarn add html-react-parser3
Lihat #238 dan #213
Kesalahan TypeScript
Jika Anda melihat kesalahan TypeScript
yarn add html-react-parser4Kemudian tingkatkan ke TypeScript versi terbaru. Lihat #748
Pertunjukan
Jalankan tolok ukur
yarn add html-react-parser5
Keluaran benchmark dijalankan di MacBook Pro 2017
yarn add html-react-parser6Jalankan Batas Ukuran
yarn add html-react-parser7
Kontributor
Kontributor Kode
Proyek ini ada berkat semua orang yang berkontribusi. [Menyumbang]
Kontributor Keuangan
Menjadi kontributor keuangan dan membantu kami mempertahankan komunitas kami. [Menyumbang]
Individu
Organisasi
Dukung proyek ini dengan organisasi Anda. Logo Anda akan muncul di sini dengan tautan ke situs web Anda. [Menyumbang]
Perusahaan
Tersedia sebagai bagian dari Langganan Tidelift
Pengelola html-react-parser dan ribuan paket lainnya bekerja dengan Tidelift untuk memberikan dukungan komersial dan pemeliharaan untuk paket open source yang Anda gunakan untuk membangun aplikasi Anda. Hemat waktu, kurangi risiko, dan tingkatkan kesehatan kode, sambil membayar pengelola paket persis yang Anda gunakan. Belajarlah lagi