react 渲染 html 特殊字符的bug

shleyZ 發布于2019-08-01 15:14 / 1649人閱讀

摘要：答案寫在最前面然后在需要轉換的地方調用這個方法生成即可，原因是無法渲染字符熟悉的人，應該都知道那些特殊字符會以的方式處理。于是我在網絡上搜索了渲染字符，然后發現官方給了方案因為要防止注入。框架是帶來思想，解決問題的，而不應當被框架限制。

答案寫在最前面(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 自己文檔里還多帶帶來寫了一個篇來講這個（雖然依舊沒解決）。

解決問題的時候，如果出現框架給的方案不能完美解決的時候，真的就需要審視的態度抑或是跳出框架的思維。框架是帶來思想，解決問題的，而不應當被框架限制。

云服務器 GPU云服務器 html的特殊字符 html里的特殊字符 html5的特殊字符 html 特殊字符=

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49844.html

用 CirruScript 渲染 HTML

摘要：早的時候我嘗試過用語法直接生成后邊也嘗試過用語法生成的模板效果勉勉強強主要是學習的作用后來有了就干脆不用了不過未來加載靜態資源還是需要有就覺得麻煩搞出點東西來這個模塊經過幾次演變最終定型成為很相似的寫法代碼是用低版本的寫的也能在里調用早的時候我嘗試過用 Cirru 語法直接生成 HTML后邊也嘗試過用 Cirru 語法生成 JavaScript 的模板效果勉勉強強, 主要是學習的作用...

BigNerdCoding 2019-08-21 10:38 評論0 收藏0
用 CirruScript 渲染 HTML

摘要：早的時候我嘗試過用語法直接生成后邊也嘗試過用語法生成的模板效果勉勉強強主要是學習的作用后來有了就干脆不用了不過未來加載靜態資源還是需要有就覺得麻煩搞出點東西來這個模塊經過幾次演變最終定型成為很相似的寫法代碼是用低版本的寫的也能在里調用早的時候我嘗試過用 Cirru 語法直接生成 HTML后邊也嘗試過用 Cirru 語法生成 JavaScript 的模板效果勉勉強強, 主要是學習的作用...

gghyoo 2019-08-01 14:50 評論0 收藏0
精益 React 學習指南（Lean React）- 1.1 React 介紹

摘要：單向數據流應用的核心設計模式，數據流向自頂向下我也是性子急的人，按照技術界的慣例，在學習一個技術前，首先得說一句。然而的單向數據流的設計讓前端定位變得簡單，頁面的和數據的對應是唯一的我們可以通過定位數據變化就可以定位頁面展現問題。書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

lsxiao 2019-08-19 18:20 評論0 收藏0
React.js 常見問題

摘要：我們常常會收到一些有趣的問題，但大多數問題都是常見問題。我創建這個資源為了幫助學習者遇到這些常見的問題時提供一定幫助。這些是表示沒有任何子節點的元素的標記。不綁定處理程序方法我把這個留到最后，因為這是一個大問題，一個很常見的問題。在 jsComplete，我們管理一個專門用于幫助編程學習者 slack 帳戶。我們常常會收到一些有趣的問題，但大多數問題都是常見問題。我創建這個資源為了...

KitorinZero 2019-08-23 15:11 評論0 收藏0