[英]React: Script tag not working when inserted using dangerouslySetInnerHTML
[英]React dangerouslySetInnerHTML not working when using variable
我正在使用React创建一个SPA,以搜索数据并显示结果。 每个结果遵循以下模型
{
"title": "A Title",
"body": " <li>escaped html&nbsp;<strong>that sould be rendered</strong>.</li>
</ul>"
}
body
属性始终是应在组件中呈现的转义html。 该组件如下所示:
function SearchResult({ title, body, favourite }) {
return (
<article className="SearchResult">
<section>
<i className={`icon-star${favourite ? ' marked' : ''}`} />
{title}
</section>
<section
dangerouslySetInnerHTML={{ __html: body }}
className="SearchResult-body"
/>
</article>
);
}
问题是,仅当我创建将变量传递给body
属性的组件时,它才会发生
results.map((result, index) => (
<SearchResult key={index} title={result.title} body={result.body} />
))
但是如果我这样做,那就很好
<SearchResult
title="A title"
body=" <li>escaped html&nbsp;<strong>that sould be rendered</strong>.</li>
</ul>"
/>
为什么有什么不同? 使用固定值时,在将其传递给默认添加的属性之前,是否应该对其进行任何预处理?
可以在此处查看此问题的演示
似乎仅当您给它转义的html时才会出现此问题 。
由@sergiotapia实现的解决方案涉及创建一个辅助函数,以取消转义html字符串以使其工作。
htmlDecode(content) {
let e = document.createElement('div');
e.innerHTML = content;
return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}
<section
dangerouslySetInnerHTML={{ __html: htmlDecode(body) }}
className="SearchResult-body"
/>
但是,正如@brigand提到的那样,我将引用“ 对其进行转义可能会导致XSS攻击和错误的呈现。 ”因此,这可能不是完美的解决方案。
参见工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.