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. 解決問題的時候，若是出現框架給的方案不能完美解決的時候，真的就須要審視的態度抑或是跳出框架的思惟。框架是帶來思想，解決問題的，而不該當被框架限制。