我有一个像< b >hi< /b >. 我必须将它呈现为“嗨”。有人可以让我知道innerHTML我可以在 React 中使用的类似Angular的等效内容吗？
如何在 React 中渲染 HTML 字符串？
IT技术
reactjs
2021-04-11 06:09:36
5个回答
您可以尝试dangerouslySetInnerHTML使用封闭标签：
<div dangerouslySetInnerHTML={{ __html: yourhtml }} />
根据官方React 文档
risklySetInnerHTML 是 React 在浏览器 DOM 中使用 innerHTML 的替代品。一般来说，从代码中设置 HTML 是有风险的，因为很容易在不经意间将用户暴露给跨站点脚本 (XSS) 攻击。所以，你可以直接从 React 设置 HTML，但是你必须输入危险的 SetInnerHTML 并传递一个带有 __html 键的对象，以提醒自己这是危险的。例如：
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
就我而言，我使用了以下 pacakge。
为避免使用 时存在的潜在安全漏洞（例如 XSS 攻击）dangerouslySetInnerHTML，您可以执行以下操作：
首先使用DOMPurify来清理 HTML。
import DOMPurify from 'dompurify';
let clean = DOMPurify.sanitize(dirtyHtmlString, {USE_PROFILES: {html: true}});
然后它可以使用react-render-html 进行渲染，正如 Salman Lone 所说：
import renderHTML from 'react-render-html';
<div>
{renderHTML(clean)}
</div>
根据网站“https://reactjs.org/docs/dom-elements.html”，您应该使用危险的SetInnerHTML 以避免跨站点脚本（XSS）攻击。但是，如果您正在控制要呈现的字符串，则可能没有必要。如果您希望以这种方式呈现 HTML，那么正如上述网站所解释的，您可以这样做：
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
我个人不喜欢危险的SetInnerHTML 方法（主要是因为它有危险这个词，这让我感到害怕）。我不能说下一个方法是否更好、更安全、更快等，但我更喜欢它。您可以使用的第二种方法是使用 useRef 呈现 HTML。
这种方法的一个例子是：
import React, {useRef, useEffect} from 'react'
export default function Example() {
const aRef = useRef()
const content = '<p style="color:red">hello</p><h1>world</h1>'
useEffect(()=>{
if(aRef==null)return
aRef.current.innerHTML = content
},[aRef, content])
return <div ref={aRef}/>
}
我忘了测试通过字符串设置类、id、ref、值等。如果有人想添加此答案，请像我对样式所做的那样为每个 React 操作添加示例。