码迷,mamicode.com
首页 > Web开发 > 详细

React 如何解析从后台读取的内容是html格式代码(带样式)

时间:2020-03-05 15:03:57      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:width   格式   return   round   name   rop   读取   asc   turn   

 React中是不解析直接从后台拿到的html格式的代码,因为是要防止XSS攻击。什么是XSS攻击,在下一个博客里面出现。所以要让react解析从后台拿到的html格式的代码就要用到以下代码,话不多说:

import React from ‘react‘
class IndexCom extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.state={
            div:‘<div style="width: 750px;height: 200px;background: red;color: #fff;"><b>11111111111111</b></div>‘,
        }
    }
    render() {
        return (
            <div>
                <div className="index">
                    <div dangerouslySetInnerHTML = {{ __html:this.state.div }}></div>
                </div>
            </div>
        )
    }
}
export default IndexCom

  

React 如何解析从后台读取的内容是html格式代码(带样式)

标签:width   格式   return   round   name   rop   读取   asc   turn   

原文地址:https://www.cnblogs.com/ygunoil/p/12420219.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!