如何在 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>
    );
}

该render'd的第一线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 包，对我有用。

第 1 步：安装软件包

npm i react-gist

第 2 步：导入你的 React 组件

import Gist from "react-gist";

第 3 步：输入您的要点 ID

 <div>
     <Gist id="f824ffb7bafec535d0b6452179f2d790" />
 </div>

或者

 <div>
     <Gist id='f824ffb7bafec535d0b6452179f2d790' file='java-file' />
 </div>

如果同一个要点中有多个文件

<Gist id={string} file={string} /> 

在哪里，

• id {string} gist 文件的 ID

• {string} 多文件要点中特定文件的名称

Answer 2

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

强烈推荐！