React 如何向div中插入原生的HTML

React开发过程中,有时需要使用原生的HTML,用于动态渲染HTML,
比如存在数据库中的,可编辑的HTML

实现代码如下:

const htmlString= '<p>Hello World</p>'
render () {
    return (
      <div
        className='editor-wrapper'
        dangerouslySetInnerHTML={{__html: htmlString }} />
    )
  }

有时,获取htmlString为了便于json传送,往往拿到到html字符串是对一些特殊的字符进行转义过了
这时,需要进行解义

function htmlspecialchars_decode(str){
  str = str.replace(/&amp;/g, '&');
  str = str.replace(/&lt;/g, '<');
  str = str.replace(/&gt;/g, '>');
  str = str.replace(/&quot;/g, '"');
  str = str.replace(/&#039;/g, "'");
  return str;
}

再附上html转义的方法

function htmlspecialchars(str){           
    str = str.replace(/&/g, '&amp;');  
    str = str.replace(/</g, '&lt;');  
    str = str.replace(/>/g, '&gt;');  
    str = str.replace(/"/g, '&quot;');  
    str = str.replace(/'/g, '&#039;');  
    return str;  
}
发布了132 篇原创文章 · 获赞 7 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/youlinhuanyan/article/details/105018633