我正在嘗試在 React 前端顯示 HTML 內容。
什么是輸入
<p>Hello/<p>
Aadafsf
<h1>H1 in hello</h1>
我是從管理端的 CKEditor 寫的
我在 React Front 中得到了什么？
<p>Hello/<p>
Aadafsf
<h1>H1 in hello</h1>它應該像
<p>Hello/<p>
Aadafsf
<h1>H1 in hello</h1>我用的什么？
import {Parser} from "html-to-react";
import DOMPurify from "dompurify";
{Parser().parse(DOMPurify.sanitize(HTMLCONTENT))}
我試過這個，但我沒有得到預期的輸出。
用過的 dangerouslySetInnerHTML
HTML CONTENT
<h2>This is Heading</h2><p><p></p></p><p>This is para.</p><p> </p><p><strong>This is Bold</strong></p><p> </p><ol><li><strong>dwsfdf</strong></li><li><strong>fdsfdf</strong></li></ol><p> </p><p> </p><p> </p><figure class="media"><oembed url="https://youtu.be/rokGy0huYEA"></oembed></figure>
<div dangerouslySetInnerHTML={{__html: HTMLCONTENT}} />;
uj5u.com熱心網友回復：
你可以允許一些你想要的標簽
let clean = DOMPurify.sanitize('<div>hello</div>',{ALLOWED_TAGS: ['b', 'q'], ALLOWED_ATTR: ['style']});
uj5u.com熱心網友回復：
實際上，您的錯誤不在于序列化，而是因為您的 HTML 中有錯字。
該<p>標簽被“封閉”由/<p>一個標簽，而不是</p>！
所以你需要更新你的 HTML：
- <p>Hello/<p>
<p>Hello</p>
Aadafsf
<h1>H1 in hello</h1>
此外，為了在您的組件中顯示原始 HTML。React 為此提供了一個函式dangerouslySetInnerHTML。
但是，請務必小心，因為這會使您的站點受到稱為跨站點腳本 (XSS) 的攻擊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/356416.html
標籤：javascript 节点.js 反应 消毒