react 渲染 html 特殊字符的bug
2021-03-26 16:25
答案写在最前面(demo)：
function translateHtmlCharater(html) {
var div = document.createElement("div");
div.innerHTML = html;
return div.textContent;
}
然后在需要转换的地方调用这个方法 translateHtmlCharater(html) 生成即可，原因是 js 无法渲染 html 字符（熟悉 tpl2js 的人，应该都知道那些特殊字符 js 会以 unicode 的方式处理）。
首先，这不是一个 bug，这不是一个 bug，这真的不是一个bug。顺便说说解决问题的过程，以及对于巩固基础的一点想法。
刚写 react 不久，公司业务后台生成的商品名当中有一些html 实体字符，会出现字符被直接以字符的形式渲染出来而不是字符结果，例如 & amp; 不会渲染成&。于是我在网络上搜索了 “react 渲染 html 字符 ” ，然后发现react 官方给了方案（因为要防止 xss 注入）。然后使用 dangerouslySetInnerHTML 的方式解决了名称的问题点这里看，但是有出现了这样的问题（把光标凡在第二排，title 会显示出来，并且显示是错的）。
这种方式一方面不优雅，另一方面没有完全解决问题。然后我在技术群里求助（很多人出现了这个问题，但大都是以 dangerouslySetInnerHTML 或者干脆不解决）。开始搜索“渲染 html 字符”看了几个，发现网上的处理并不优雅，甚至有人拿正则来替换（也是醉）。各方求助之后，有人问我你这个是 html 实体字符啊，js 怎么可能渲染。于是这个时候出现转机，出现了文章一开头的解决办法。什么问题都给到了解决。
列几点，对自己的期望，也希望能帮助看这篇文章的人：
在这个前端框架不断涌现，前端技术突飞猛进的时代，基础依旧是一个前端工程师赖以生存的根本。比如这个问题，其实很入门，但 github 有 issue ，react 自己文档里还单独来写了一个篇来讲这个（虽然依旧没解决）。
解决问题的时候，如果出现框架给的方案不能完美解决的时候，真的就需要审视的态度抑或是跳出框架的思维。框架是带来思想，解决问题的，而不应当被框架限制。
文章标题：react 渲染 html 特殊字符的bug
文章链接：http://soscw.com/index.php/essay/68192.html