React中防止字符转义
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> 2015</h1>
<ThemeSwitch/>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
themeColor: state.themeColor
}
}
Header = connect(mapStateToProps, null)(Header)
export default Header
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步