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

问题描述：

我有一个Post组件，它将使用从Firebase检索的内容设置innerHtml。在从Firebase检索到的html字符串中生成嵌入的要点 - React

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> 
    )

的要显示的内容存储在火力如此：

{ 
     "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........

但是，由于发生反应“内容”内不会评价script标签，我不能嵌入一个要点。我已经尝试了一些替代方案，但寻找建议。

答

对不起，延迟的答案。这里你去：

首先，让我们看看为什么在React组件内嵌入script标记不起作用。 Michelle Tilley对这个问题给出了很好的答案。

Gist嵌入脚本使用document.write编写使成为嵌入式Gist的HTML到文档的HTML中。但是，到您的React组件添加脚本标记时，写入文档已为时过晚。

- taken from here

如果要嵌入您的网页内的要点，你必须得到主旨内容的，并将其呈现的文件在你自己里面。这项特定工作在互联网上有很多组件。这是一个我做了，并用我自己的项目：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> 
) 
}

你一定要救主旨的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那些准备在浏览器中使用，如果你不使用的软件包管理器做。有关更多示例，请参阅项目的GitHub。

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

相关推荐