Firebaseから取得したhtml文字列内に埋め込み要旨を生成する - 反応

Question

Firebaseから取得したコンテンツを使用してinnerHtmlを設定するPostコンポーネントがあります。

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

しかし、リアクトは、「コンテンツ」内のスクリプトタグを評価しませんので、私はその要旨を埋め込むことはできません。私はいくつかの選択肢を試しましたが、提案を探しています。

Answer 1

遅れて申し訳ありません。ここに行く：

最初に、scriptタグをリアクト・コンポーネント内に埋め込むことは機能しません。 Michelle Tilleyはこの質問に非常に良い答えを与えました。

Gist埋め込みスクリプトは、document.writeを使用して、 を埋め込みGistをドキュメントのHTMLにするHTMLを書き出します。しかし、 あなたのReactコンポーネントがスクリプトタグを追加するときには、ドキュメントを に書き込むのは遅すぎます。

- taken from here

あなたのページ内の要旨を埋め込みたい場合は、コンテンツの要旨のを取得し、ドキュメント内に自分でそれらをレンダリングする必要があります。その特定の仕事のためにインターネットには多くのコンポーネントがあります。あなただけのオブジェクトcontentに要旨のURLを保存する必要が

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

：次に、あなたがそうのようなプロジェクトでそのコンポーネントを使用することができますsuper-react-app

：ここでは私が作ったと私自身のプロジェクトのために使用するものですプロパティ、のようなもの：

{ 
    "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を参照してください。