React中防止字符转义

安全青年 lv.1

发布时间：2023-01-12 11:37:48 304

相关标签： # html

React 会将所有要显示到 DOM 的字符串转义，防止 XSS。所以，如果 JSX 中含有转义后的
实体字符，比如 ©（©），则最后 DOM 中不会正确显示，因为 React 自动把 © 中的特
殊字符转义了。

解决方案：

import React, { Component } from 'react';
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import ThemeSwitch from './ThemeSwitch'

class Header extends Component {
  static propTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <div>
        <h1 style={{ color: this.props.themeColor }}>{['cc ', <span>©span>, ' 2015']}h1>
        <h1 dangerouslySetInnerHTML={{__html: 'cc © 2015'}}>h1>
        <h1 style={{ color: this.props.themeColor }}>cc  <span>©span> 2015h1>
        <ThemeSwitch/>
      div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    themeColor: state.themeColor
  }
}
Header = connect(mapStateToProps, null)(Header)

export default Header

文章来源： https://blog.51cto.com/xutongbao/5432189

特别声明：以上内容（图片及文字）均为互联网收集或者用户上传发布，本站仅提供信息存储服务！如有侵权或有涉及法律问题请联系我们。