如何在React中呈现HTML实体而不危险地设置InnerHTML？

Question

I'm using custom fonts in my site, similar to Font Awesome, which have simple signature:

<i className="icon-plus"></i>

But I want to create own component which will be render dynamic HTML entities like:

const iconEntity = '' // (Font Awesome HTML entity example)
const icon1 = '' // dynamic entities

class OwnIcon extends React.Component {
  render() {
   return <i>{iconEntity}</i>
  }
}

But this doesn't work. After reading this post I trier using dangerouslySetInnerHTML and it works, eg:

const iconEntity = ''

class OwnIcon extends React.Component {
  render() {
    return <i className="icon" dangerouslySetInnerHTML={{__html: iconEntity }}></i>
  }
}

But it's a little bit ugly solution. After reading JSX gotchas I found that there are solutions like:

A safer alternative is to find the unicode number corresponding to the entity and use it inside of a JavaScript string:

<div>{'First \u00b7 Second'}</div>
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

But how I could convert(for example, Font Awesome) Unicode Private-Use characters "\\f007" or HTML hex entity &#xf007 to get unicode number to get rid of dangerouslySetInnerHTML and render icons in more "clear" way?

Text examples: here

Answer 1

Put it in a Fragment so the value becomes JSX, and will be output as HTML:

const iconEntity = <Fragment>&#xf2b9;</Fragment>

class OwnIcon extends React.Component {
  render() {
    return <i className="icon">{iconEntity}</i>
  }
}

The downside to this, of course, is that you don't get to say "Let's get dangerous!" like Darkwing Duck. ;)