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

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”/>

おすすめだ!




source
GitHub Gist全体をページに動的に埋め込むにはどうすればよいですか?
GitHub Gist APIパッチが機能しませんか?
HaskellのGithub Gist APIの使用
Github Gistの作成と編集はFirefoxでは機能しませんか?
gist.github.comの改行の破壊を防ぐ?
GitHub:Gistをリポジトリに追加する方法は?
アニメーションGIFをgithubリポジトリREADME.mdに埋め込むにはどうすればよいですか?
githubに追加できません:Gistはディレクトリをサポートしていません
SSHプロトコル経由でGithub Gistを複製するには?
github gistからリポジトリに変更をインポートする
Rating