react的dangerouslySetInnerHTML使用

2022-03-17  本文已影响0人  水晶草720

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>
    )
    }
}
上一篇下一篇

猜你喜欢

热点阅读