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

Question

我正在尝试使用 Github Gist API 获取我的所有要点并将它们嵌入到网页中。每个 Gist 都有一个博客 post，我将其包含在以下组件中：

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 组件中的行为方式有关。我什至没有想到这会成为一个问题。谁能推荐一个简单的解决方法，以便我可以成功嵌入这些 Gists？

谢谢！

Answer 1

在HTML中，一个<script>标签将JavaScript代码嵌入到要执行的页面中。它不会显示 src 属性中指定的 URL 中的代码。

Gist API 中的 gist 对象包含您需要的所有数据。不要尝试自己构建 URL。相反，看看 gist 对象中还有什么。例如，according to the documentation、gist.files是一个包含gist中每个文件信息的对象。这个对象中的键是文件名，那些包含 content 属性给出文件的内容所以如果你有一个名为 hello.js 的文件，你可以做 gist.files['hello.js'].content .由于您可能事先不知道该文件，因此您可以循环遍历 gist.files 对象的键。

一般来说，当您使用 API 时，您应该仔细查看文档以了解它为您提供的信息。

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

强烈推荐！

Answer 3

此解决方案可让您在 iFrame 中嵌入任何内容：

import Frame from 'react-frame-component';

<Frame  initialContent="<!DOCTYPE html><html><head></head><body><script src='https://gist.github.com/[YourUsername]/aa7101515bb1586857ca43beac8e0abc.js'></script></body></html>" />

只需将上面代码中的要点 url 替换为您自己的。

框架组件位于： https://www.npmjs.com/package/react-frame-component

Answer 4

使用 this npm 包，对我有用。

步骤 1： 安装包

npm i react-gist

第 2 步： 导入你的 React 组件

import Gist from "react-gist";

第 3 步： 输入你的 gist id

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

或

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

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

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

其中，

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

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

How can I embed a Github Gist inside of a React component?

gist

reactjs