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>&copy;</span>, ' 2015']}</h1>
        <h1 dangerouslySetInnerHTML={{__html: 'cc &copy; 2015'}}></h1>
        <h1 style={{ color: this.props.themeColor }}>cc  <span>&copy;</span> 2015</h1>
        <ThemeSwitch/>
      </div>
    )
  }
}

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

export default Header