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. 解决问题的时候,如果出现框架给的方案不能完美解决的时候,真的就需要审视的态度抑或是跳出框架的思维。框架是带来思想,解决问题的,而不应当被框架限制。

    原文作者:flashback
    原文地址: https://segmentfault.com/a/1190000005035773
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞