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不会评估“内容”中的脚本标记，因此我无法嵌入要点。我尝试了几种替代方案但寻找建议。

Answer 1

对不起延迟回答。你走了：

首先，让我们看看为什么在React Component中嵌入script标记无法正常工作。 Michelle Tilley对这个问题给出了很好的答案。

Gist embed脚本使用document.write来编写HTML   将嵌入的Gist放入文档的HTML中。但是，到时候   您的React组件添加了脚本标记，写入时已为时已晚   文件。

- taken from here

如果您想在页面中嵌入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的网址保存在对象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形式提供，可以在浏览器中使用。有关更多示例，请参阅项目GitHub。

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

1 个答案: