美文网首页
react的dangerouslySetInnerHTML使用

react的dangerouslySetInnerHTML使用

作者: 水晶草720 | 来源:发表于2022-03-17 18:22 被阅读0次

    React的属性dangerouslySetInnerHTML:myhtml内容既可以字符串,也可以是带标签的模板。

    react项目有个需求要将后台返回的字符串(字符串中可能包含<a>标签的链接),但是加上html标签就不能直接展示了。
    在vue中有v-html可以轻松的插入,在react中也提供了一个属性可以帮我们将dom字符串转化为dom节点,
    这个属性就是:dangerouslySetInnerHTML,接收一个对象具体用法如下:

    import React, { Component } from 'react'
    import './css/01-index.css'
    export default class app extends Component {
    
        state = {
            myhtml:`<div class="bili-bangumi-card">更新至第11话</div>`
        };
       
      render() {
        return (
            <div>
                    <div dangerouslySetInnerHTML={{
                        __html: this.state.myhtml
                    }}></div>
              </div>
        )
        }
    }
    

    相关文章

      网友评论

          本文标题:react的dangerouslySetInnerHTML使用

          本文链接:https://www.haomeiwen.com/subject/brxbdrtx.html