reactjs - 如何在 React 组件中嵌入 Github Gist？

Question

我正在尝试使用 Github Gist API 来获取我所有的要点并将它们嵌入到网页中。每个 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标签什么都不做。

我在一个普通的 HTML 文档上尝试了这个，他的模式是 <script src="https://gist.github.com/seisvelas/gist_id.js"></script> (我从 Gist 网站本身获得的)在给定有效的 gist_id 的情况下确实有效。

我猜这与 script 的方式有关标签在 React 组件中的行为。我什至没有想到这会是一个问题。谁能推荐一个简单的解决方法，以便我可以成功嵌入这些要点？

谢谢!

Answer 1

对于遇到此问题的其他人，我使用 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"/>

强烈推荐!