相关文章推荐
坚强的南瓜  ·  Day ...·  2 周前    · 
成熟的梨子  ·  React ...·  2 周前    · 
慷慨的蜡烛  ·  Unity2020降至Unity2018-U ...·  2 年前    · 
谦和的电影票  ·  Setter injection ...·  2 年前    · 
追风的显示器  ·  Python Tkinter ...·  2 年前    · 

对于正常的字符串大家都知道怎么处理,但是加上html标签就不能直接展示了 在vue中有v-html可以轻松的插入,在react中也提供了一个可以帮我们将HTML字符串解析为html代码标签属性---dangerouslySetInnerHTML; 其使用方法如下

class xxxx extends Component {
    state = {
        htmlCode: "
                <li>列表1</li>
                <li>列表2</li>
                <li>列表3</li>
    render() {
        return (
            <div dangerouslySetInnerHTML={{__html: this.state.htmlCode}}></div>
  • dangerouslySetInnerHTMl是React标签的一个属性,类似于angular的ng-bind;
  • 有2个{{}},第一{}代表jsx语法开始,第二个是代表dangerouslySetInnerHTML接收的是一个对象键值对;
  • 既可以插入DOM,又可以插入字符串;
  • 不合时宜的使用 innerHTML 可能会导致 cross-site scripting (XSS) 攻击。净化用户的输入来显示的时候,经常会出现错误,不合适的净化也是导致网页攻击的原因之一。dangerouslySetInnerHTML 这个 prop 的命名是故意这么设计的,以此来警告,它的 prop 值( 一个对象而不是字符串 )应该被用来表明净化后的数据。
  • 分类:
    前端
    标签: