React dangerouslySetInnerHTML api 的介绍与使用

Posted 2022-02-02 大唐荣华

使用场景：

在 react 项目中，当后端接口返回的一个字段里有HTML字符实体的情况下，是不会转换成对应样式的。
比如& g t; 就不会显示成>,
< b r > 也不会进行换行。
这时候用 dangerouslySetInnerHTML就可以正常渲染混有 DOM字符串。

举例：

<div dangerouslySetInnerhtml =  __html: 接口传来的数据 />

如果是直接调用渲染接口中的值，则是以上的写法，如果仅仅是显示固定的内容，用如下的方式：

<div dangerouslySetInnerHTML= __html: '<div>固定内容</div>'  />

总结；

1. dangerouslySetInnerHTML api 有2个undefined，第一代表jsx语法开始，第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;

2. dangerouslySetInnerHTML api 既可以插入DOM，又可以插入字符串或者固定确认的值；

注意：不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。 如果传来的数据是用户可以输入传来显示的时候，经常会出现错误，甚至插入脚本攻击。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的，以此来警告，它的 prop 值（ 一个对象而不是字符串 ）应该被用来表明净化后的数据。