react 渲染 html 特殊字符的bug

答案写在最前面(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 怎么可能渲染。因而这个时候出现起色，出现了文章一开头的解决办法。什么问题都给到了解决。

列几点，对本身的指望，也但愿能帮助看这篇文章的人：

1. 在这个前端框架不断涌现，前端技术日新月异的时代，基础依旧是一个前端工程师赖以生存的根本。好比这个问题，其实很入门，但 github 有 issue ，react 本身文档里还单独来写了一个篇来说这个（虽然依旧没解决）。

2. 解决问题的时候，若是出现框架给的方案不能完美解决的时候，真的就须要审视的态度抑或是跳出框架的思惟。框架是带来思想，解决问题的，而不该当被框架限制。