React 中如何解析html标签呢？ dangerouslySetInnerHTML

刺骨的言语ヽ痛彻心扉 2023-05-30 09:24 42阅读 0赞

**vue中解析html标签： v-html**

data:{
        txtData:'<div class="content">
        <a class="title">10个好习惯可以让女生慢慢变美</a>
        <p class="abstract">
          1.多喝水。 这已经是一个老生常谈的问题了。女人是水做的。多喝白开水...
        </p>
        <div class="meta">
            <span class="jsd-meta">
                <i class="iconfont ic-paid1"></i> 21.3
            </span>
            <a class="nickname" target="_blank" href="/u/341c7837cd64">夏七言</a>
            <a target="_blank" href="/p/37a03c2ed049#comments">
                <i class="iconfont ic-list-comments"></i> 14
            </a>      
            <span><i class="iconfont ic-list-like"></i> 117</span>
        </div>
      </div>'
    }
    
    // 使用v-html解析
    <div v-html="txtData"></div>

**react中解析html标签：dangerouslySetInnerHTML**

this.state = {
        txtData:'<div class="content">
        <a class="title">10个好习惯可以让女生慢慢变美</a>
        <p class="abstract">
          1.多喝水。 这已经是一个老生常谈的问题了。女人是水做的。多喝白开水...
        </p>
        <div class="meta">
            <span class="jsd-meta">
                <i class="iconfont ic-paid1"></i> 21.3
            </span>
            <a class="nickname" target="_blank" href="/u/341c7837cd64">夏七言</a>
            <a target="_blank" href="/p/37a03c2ed049#comments">
                <i class="iconfont ic-list-comments"></i> 14
            </a>      
            <span><i class="iconfont ic-list-like"></i> 117</span>
        </div>
      </div>'
    }
    
    // 解析dangerouslySetInnerHTML
    <div dangerouslySetInnerHTML={
       {__html:this.state.txtData}} ></div>

\--------完。