Question

我在网站上使用的自定义字体类似于Font Awesome，具有简单的签名：

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

但是我想创建自己的组件，该组件将呈现动态HTML实体，例如：

const iconEntity = '&#xf2b9;' // (Font Awesome HTML entity example)
const icon1 = '&#xf13d;' // dynamic entities

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

但这不起作用。阅读此post后，我使用dangerouslySetInnerHTML进行了尝试，它可以正常工作，例如：

const iconEntity = '&#xf2b9;'

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

但这是一个难看的解决方案。阅读JSX gotchas后，我发现有类似的解决方案：

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>

但是我该如何转换（例如Font Awesome）Unicode专用字符"\f007"或HTML十六进制实体&#xf007以获取unicode号以摆脱dangerouslySetInnerHTML并渲染图标以更“清晰”的方式？

文字示例：here

Answer 1

将其放入Fragment中，这样该值将变为JSX，并将输出为HTML：

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

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

当然，这样做的缺点是您不会说“让我们变得危险！”像黑翼鸭一样。 ;）

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

1 个答案: