資訊專欄INFORMATION COLUMN
摘要：答案寫在最前面然后在需要轉(zhuǎn)換的地方調(diào)用這個(gè)方法生成即可，原因是無法渲染字符熟悉的人，應(yīng)該都知道那些特殊字符會(huì)以的方式處理。于是我在網(wǎng)絡(luò)上搜索了渲染字符，然后發(fā)現(xiàn)官方給了方案因?yàn)橐乐棺⑷??？蚣苁菐硭枷耄鉀Q問題的，而不應(yīng)當(dāng)被框架限制。
答案寫在最前面(demo)：
function translateHtmlCharater(html) {
var div = document.createElement("div");
div.innerHTML = html;
return div.textContent;
}
然后在需要轉(zhuǎn)換的地方調(diào)用這個(gè)方法 translateHtmlCharater(html) 生成即可，原因是 js 無法渲染 html 字符（熟悉 tpl2js 的人，應(yīng)該都知道那些特殊字符 js 會(huì)以 unicode 的方式處理）。
首先，這不是一個(gè) bug，這不是一個(gè) bug，這真的不是一個(gè)bug。順便說說解決問題的過程，以及對于鞏固基礎(chǔ)的一點(diǎn)想法。
剛寫 react 不久，公司業(yè)務(wù)后臺生成的商品名當(dāng)中有一些html 實(shí)體字符，會(huì)出現(xiàn)字符被直接以字符的形式渲染出來而不是字符結(jié)果，例如 & amp; 不會(huì)渲染成&。于是我在網(wǎng)絡(luò)上搜索了 “react 渲染 html 字符 ” ，然后發(fā)現(xiàn)react 官方給了方案（因?yàn)橐乐?xss 注入）。然后使用 dangerouslySetInnerHTML 的方式解決了名稱的問題點(diǎn)這里看，但是有出現(xiàn)了這樣的問題（把光標(biāo)凡在第二排，title 會(huì)顯示出來，并且顯示是錯(cuò)的）。
這種方式一方面不優(yōu)雅，另一方面沒有完全解決問題。然后我在技術(shù)群里求助（很多人出現(xiàn)了這個(gè)問題，但大都是以 dangerouslySetInnerHTML 或者干脆不解決）。開始搜索“渲染 html 字符”看了幾個(gè)，發(fā)現(xiàn)網(wǎng)上的處理并不優(yōu)雅，甚至有人拿正則來替換（也是醉）。各方求助之后，有人問我你這個(gè)是 html 實(shí)體字符啊，js 怎么可能渲染。于是這個(gè)時(shí)候出現(xiàn)轉(zhuǎn)機(jī)，出現(xiàn)了文章一開頭的解決辦法。什么問題都給到了解決。
列幾點(diǎn)，對自己的期望，也希望能幫助看這篇文章的人：
在這個(gè)前端框架不斷涌現(xiàn)，前端技術(shù)突飛猛進(jìn)的時(shí)代，基礎(chǔ)依舊是一個(gè)前端工程師賴以生存的根本。比如這個(gè)問題，其實(shí)很入門，但 github 有 issue ，react 自己文檔里還多帶帶來寫了一個(gè)篇來講這個(gè)（雖然依舊沒解決）。
解決問題的時(shí)候，如果出現(xiàn)框架給的方案不能完美解決的時(shí)候，真的就需要審視的態(tài)度抑或是跳出框架的思維?？蚣苁菐硭枷?，解決問題的，而不應(yīng)當(dāng)被框架限制。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/49844.html
摘要：早的時(shí)候我嘗試過用語法直接生成后邊也嘗試過用語法生成的模板效果勉勉強(qiáng)強(qiáng)主要是學(xué)習(xí)的作用后來有了就干脆不用了不過未來加載靜態(tài)資源還是需要有就覺得麻煩搞出點(diǎn)東西來這個(gè)模塊經(jīng)過幾次演變最終定型成為很相似的寫法代碼是用低版本的寫的也能在里調(diào)用 早的時(shí)候我嘗試過用 Cirru 語法直接生成 HTML后邊也嘗試過用 Cirru 語法生成 JavaScript 的模板效果勉勉強(qiáng)強(qiáng), 主要是學(xué)習(xí)的作用...
摘要：早的時(shí)候我嘗試過用語法直接生成后邊也嘗試過用語法生成的模板效果勉勉強(qiáng)強(qiáng)主要是學(xué)習(xí)的作用后來有了就干脆不用了不過未來加載靜態(tài)資源還是需要有就覺得麻煩搞出點(diǎn)東西來這個(gè)模塊經(jīng)過幾次演變最終定型成為很相似的寫法代碼是用低版本的寫的也能在里調(diào)用 早的時(shí)候我嘗試過用 Cirru 語法直接生成 HTML后邊也嘗試過用 Cirru 語法生成 JavaScript 的模板效果勉勉強(qiáng)強(qiáng), 主要是學(xué)習(xí)的作用...
摘要：單向數(shù)據(jù)流應(yīng)用的核心設(shè)計(jì)模式，數(shù)據(jù)流向自頂向下我也是性子急的人，按照技術(shù)界的慣例，在學(xué)習(xí)一個(gè)技術(shù)前，首先得說一句。然而的單向數(shù)據(jù)流的設(shè)計(jì)讓前端定位變得簡單，頁面的和數(shù)據(jù)的對應(yīng)是唯一的我們可以通過定位數(shù)據(jù)變化就可以定位頁面展現(xiàn)問題。 書籍完整目錄 1.1 React 介紹 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...
摘要：我們常常會(huì)收到一些有趣的問題，但大多數(shù)問題都是常見問題。我創(chuàng)建這個(gè)資源為了幫助學(xué)習(xí)者遇到這些常見的問題時(shí)提供一定幫助。這些是表示沒有任何子節(jié)點(diǎn)的元素的標(biāo)記。不綁定處理程序方法我把這個(gè)留到最后，因?yàn)檫@是一個(gè)大問題，一個(gè)很常見的問題。 在 jsComplete，我們管理一個(gè)專門用于幫助編程學(xué)習(xí)者 slack 帳戶。我們常常會(huì)收到一些有趣的問題，但大多數(shù)問題都是常見問題。 我創(chuàng)建這個(gè)資源為了...
閱讀 2725·2021-11-17 17:01
閱讀 2100·2021-09-28 09:35
閱讀 3611·2021-09-01 11:04
閱讀 879·2020-06-22 14:41
閱讀 2994·2019-08-30 15:55
閱讀 2605·2019-08-30 15:43
閱讀 2331·2019-08-26 13:54
閱讀 2524·2019-08-26 13:48
