react 渲染 html 特殊字符的bug

shleyZ 发布于2019-08-01 15:14 / 1500人阅读

摘要：答案写在最前面然后在需要转换的地方调用这个方法生成即可，原因是无法渲染字符熟悉的人，应该都知道那些特殊字符会以的方式处理。于是我在网络上搜索了渲染字符，然后发现官方给了方案因为要防止注入。框架是带来思想，解决问题的，而不应当被框架限制。

答案写在最前面(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 自己文档里还多带带来写了一个篇来讲这个（虽然依旧没解决）。

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

云服务器服务器托管 html的特殊字符 html里的特殊字符 html5的特殊字符 html 特殊字符=

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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 学习指南（Lean React）- 1.1 React 介绍

摘要：单向数据流应用的核心设计模式，数据流向自顶向下我也是性子急的人，按照技术界的惯例，在学习一个技术前，首先得说一句。然而的单向数据流的设计让前端定位变得简单，页面的和数据的对应是唯一的我们可以通过定位数据变化就可以定位页面展现问题。书籍完整目录 1.1 React 介绍 showImg(https://segmentfault.com/img/bVvJgS); 1.1.1 React ...

renweihub 2019-08-05 17:48 评论0 收藏0
React.js 常见问题

摘要：我们常常会收到一些有趣的问题，但大多数问题都是常见问题。我创建这个资源为了帮助学习者遇到这些常见的问题时提供一定帮助。这些是表示没有任何子节点的元素的标记。不绑定处理程序方法我把这个留到最后，因为这是一个大问题，一个很常见的问题。在 jsComplete，我们管理一个专门用于帮助编程学习者 slack 帐户。我们常常会收到一些有趣的问题，但大多数问题都是常见问题。我创建这个资源为了...

KitorinZero 2019-08-23 15:11 评论0 收藏0