在从 Firebase 检索到的 html 字符串中生成嵌入式要点 - React

Question

我有一个 Post 组件，它将使用从 Firebase 检索到的内容设置 innerHtml。

render() {
    return (
        <Panel>
            <Image src={this.state.img} alt={this.state.title} />
            <h2>{this.state.title}</h2>
            <p className='date'>{this.state.name}</p>
            <div className='text' ref='post'>
                <div dangerouslySetInnerHTML={{__html: this.state.content}} />
            </div>
        </Panel>
    )

要显示的内容是这样存储在firebase中的：

{
      "id": 11,
      "title": "The Earth",
      "slug": "the-lazy-mans-guide-to-anything-about-princess",
      "img": "https://hd.unsplash.com/photo-1467321638755-7246fd0dc1f3",
      "summary": "<p>In as name to here them deny wise this. As rapid woody my he me which. Men but they fail shew just wish next put. Led all visitor musical calling nor her. Within coming figure sex things are. Pretended concluded did repulsive education smallness yet yet described. Had country man his pressed shewing. No gate dare rose he. Eyes year if miss he as upon.</p>",
      "content": "<p>In as name to here them deny wise this........

但是，由于 React 不会评估 'content' 中的脚本标签，我无法嵌入要点。我尝试了几种选择，但正在寻找建议。

Answer 1

抱歉延迟回复。给你：

首先，让我们看看为什么在 React 组件中嵌入 script 标签不起作用。 Michelle Tilley这个问题回答的很好

The Gist embed script uses document.write to write the HTML that makes up the embedded Gist into the document's HTML. However, by the time your React component adds the script tag, it's too late to write to the document.

--

如果您想在页面中嵌入 Gist，您必须获取 Gist 的内容并自行在文档中呈现它们。互联网上有许多针对该特定工作的组件。这是我制作并用于我自己的项目的一个：super-react-app

然后您就可以像这样在您的项目中使用该组件了：

render() {
  return (
    <Panel>
      <Image src={this.state.img} alt={this.state.title} />
      <h2>{this.state.title}</h2>
      <p className='date'>{this.state.name}</p>
      <div className='text' ref='post'>

      {/* provide the url of the gist repository or the permalink of a gist file and you are ready to go */}
      <Gist url={this.state.content} />


      </div>
    </Panel>
  )
}

您只需将 Gist 的 url 保存在对象 content 属性中，例如：

{
  "id": 11,
  "title": "The Earth",
  "slug": "the-lazy-mans-guide-to-anything-about-princess",
  "img": "https://hd.unsplash.com/photo-1467321638755-7246fd0dc1f3",
  "summary": "<p>In as name to here them deny wise this. As rapid woody my he me which. Men but they fail shew just wish next put. Led all visitor musical calling nor her. Within coming figure sex things are. Pretended concluded did repulsive education smallness yet yet described. Had country man his pressed shewing. No gate dare rose he. Eyes year if miss he as upon.</p>",

  "content": "https://gist.github.com/oneUser/5f55a83909a3fsb766934ffe802930df"

}

以上工具也作为 UMD module that are ready to be used in your browser if you do not use a package manager. See the project's GitHub 提供更多示例。

在从 Firebase 检索到的 html 字符串中生成嵌入式要点 - React

Generate embedded gist within html string retrieved from Firebase - React

gist

firebase

reactjs

firebase-realtime-database