Saya sarankan menggunakan Pelapis diciptakan oleh milesj . Ini adalah perpustakaan yang fenomenal yang menggunakan angka jika teknik cerdik untuk mengurai dan memasukkan HTML dengan aman ke DOM.
Interweave adalah pustaka reaksi untuk merender HTML dengan aman, atribut filter, teks autowrap dengan korek api, render karakter emoji, dan banyak lagi.
- Interweave adalah React library yang kuat yang dapat:
- Membuat HTML dengan aman tanpa menggunakan hazardSetInnerHTML.
- Lepas tag HTML dengan aman.
- XSS otomatis dan perlindungan injeksi.
- Bersihkan atribut HTML menggunakan filter.
- Komponen interpolasi menggunakan pencocokan.
- URL tautan otomatis, IP, email, dan tagar.
- Render Emoji dan karakter emotikon.
- Dan banyak lagi!
Contoh Penggunaan:
import React from 'react';
import { Markup } from 'interweave';
const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"
<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave
//to install package using npm, execute the command
npm install interweave