React中标签字符串强制转html解析的方法

React中标签字符串强制转html解析的方法

---

遇到的问题:在React中我们经常会请求数据并渲染到页面中间显示，我们可以直接使用更新state的方法，并使用tihs.state.(data)的方法进行渲染，但是我们有时候会遇到需要渲染html标签的字符串到页面中如果直接进行渲染我们得到的是html字符串，并不是我们想要的html标签。这个时候我们应该怎么办呢？

1. js原生方法

 var html="<p>这是需要渲染的标签字符串</p>"
 document.body.innerHTML = html

  
  

  
  
1
2

2. jquery方法

 var html="<p>这是需要渲染的标签字符串</p>"
 var parent = $('body');
 parent.html(html)

  
  

  
  
1
2
3

3. react中强制转为html解析的方法

<div  dangerouslySetInnerHTML={{ __html: html }} ></div>

  
  

  
  
1

在React中尽量少使用该方法，使用该方法容易受到XSS攻击

注意：便签内部必须为空，空格也不行。

                                </div>