react中渲染富文本
在 react 中,通过富文本编辑器进行操作后的内容,会保留原有的标签样式,并不能正确展示。
在显示时,将内容写入__html 对象中即可。具体如下:
1 |
|
如果是直接调用接口中的值,则是以上的写法,如果是单纯的显示固定的内容,用如下的写法:
1 |
|
原理:
1.dangerouslySetInnerHTMl 是 React 标签的一个属性,类似于 angular 的 ng-bind;
2.有 2 个{{}}
,第一{}
代表 jsx 语法开始,第二个是代表 dangerouslySetInnerHTML 接收的是一个对象键值对;
3.既可以插入 DOM,又可以插入字符串;
4.不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!