在 React 中的 Firestore 中渲染保存的 HTML 字符串答案

【问题标题】：Render saved HTML string in Firestore in React在 React 中的 Firestore 中渲染保存的 HTML 字符串
【发布时间】：2019-11-25 18:58:26
【问题描述】：

我在 Firestore 中存储了一些字符串：

item1: {
    content: '<p>Hi</p>'
}
item2: {
    content: '<p>Hi 2</p>'
}

当我在我的 React 组件中使用以下渲染函数时，它会打印出段落标签（和任何其他 HTML）：

render() {
  const { items } = this.state

  this.items = items.map(function(item, key) {
    <li key={key}>{item['content']}</li>
  })

  return (
    <ul>
      {this.items}
    </ul>
  )
}

如何解决？没有危险的SetInnerHtml 有什么方法可以做到这一点？

【问题讨论】：

为什么不想危险地使用SetInnerHtml？
看起来很危险！项目内容是用户生成的，这是否会使应用程序易受攻击？
这取决于你的内容来自哪里，我认为这是在你的 react 代码中插入 html 的最常用方法。
用户在应用程序中输入 HTML 内容，然后该组件将其打印到其他地方。我听说如果可能的话应该避免危险的SetInnerHtml，所以看看这是否是一个有意义的使用它的情况。

标签： javascript reactjs firebase google-cloud-firestore jsx

【解决方案1】：

为此使用了 react-html-parser 包：

https://www.npmjs.com/package/react-html-parser

【讨论】：