Reactコンポーネントの中にGithub Gistを埋め込むにはどうすればよいですか?

Github Gist APIを使用して、すべてのギストを取得してWebページに埋め込もうとしています。各Gistは、次のコンポーネント内に含まれるブログ投稿を保持します。

function BlogEntry(gist) {
return (
<div>
{gist.createdAt} {gist.id} {gist.description}
<script src={“https://gist.github.com/seisvelas/” + gist.id + “.js”}></script>
</div>
);
}

レンダリングdiv、{gist.createdAt} {gist.id} {gist.description}の最初の行は機能するので、APIとうまくやりとりしていることがわかります。しかし、scriptタグの2番目の部分は何もしません。

私はこれをプレーンなHTML文書で試してみましたが、有効なgist_idが与えられた場合、<script src=”https://gist.github.com/seisvelas/gist_id.js”></script>(私はGistのウェブサイトから得ました)は動作します。

これは、scriptタグがReactコンポーネントでどのように動作するかと関係があると思います。これが問題になることさえ私には起こっていませんでした。誰も簡単な回避策をお勧めして、これらのGistsを正常に埋め込むことができますか?

ありがとう!

この問題に遭遇する他の誰かにとって、npmパッケージ react-embed-gist を使って解決しました。それは死んでいて、次のようになります:

import ReactEmbedGist from ‘react-embed-gist’;

// Only required attribute is gist
<ReactEmbedGist gist=”msaracevic/5d757e2fc72482a9a4a439969500c2eb”
wrapperClass=”gist__bash”
loadingClass=”loading__screen”
titleClass=”gist__title”
file=”.bash_profile.sh”/>

おすすめだ!