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

【问题标题】：How can I embed a Github Gist inside of a React component?如何在 React 组件中嵌入 Github Gist？
【发布时间】：2019-12-20 09:28:39
【问题描述】：

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

谢谢！

【问题讨论】：

为什么要在此处嵌入
您需要使用iframe 而不是script。
@Code-Apprentice 我想展示 Gist 的内容
@Clarity 这不起作用，这是有道理的。 Gist 嵌入链接是一堆 JS 代码。将它作为 iframe 导入不会做同样的事情（我试过了，它只是呈现一个空白 iframe）

标签： reactjs gist

【解决方案1】：

使用this npm 包，为我工作。

第 1 步：安装包

npm i react-gist

第 2 步： 导入您的反应组件

import Gist from "react-gist";

第 3 步：输入您的 gist id

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

或

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

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

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

在哪里，

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

【讨论】：

谢谢，这对我有用

【解决方案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"/>

强烈推荐！

【讨论】：

很高兴能提供帮助。如果您想知道如何在没有模块的情况下执行此操作，我在此处注释了源代码：github.com/msaracevic/react-embed-gist/blob/master/src/…
@MiroslavSaracevic 感谢您制作了很棒的东西！如果没有 react-embed-gist，我将无法按照我想要的方式完成我的项目！
嗨，目前尚不清楚如何将 ReactEmbedGist 方法添加到包含实际文本的 Markdown（或 MDX）文件中，之后我需要嵌入 Gist。你知道怎么做吗？（没有办法在 MDX 文件中“导入”。）谢谢。
根据 MDX 自述文件，您确实可以在 MDX 文件中导入：github.com/mdx-js/mdx#example

【解决方案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>" />

只需将上面代码中的 gist url 替换为您自己的即可。

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

【讨论】：

【解决方案4】：

在 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 时，您应该仔细查看文档以了解它为您提供了哪些信息。

【讨论】：

不，这完全是错误的。将其放在纯 HTML 文档中：<script src="https://gist.github.com/seisvelas/0dded61a10f716793645fe152885b5a5.js"></script>。 “显示我的代码”正是它的作用。
是的，它执行 JS 代码，但是 JS 代码使用一堆 document.writes 来创建 Gist 的嵌入式显示。自己尝试一下，您就会立即明白我的意思。这个问题与 Gist 的 API 无关。
@seisvelas 好的，我明白你的意思了。我认为该链接直接指向您的代码。不过，它不是。相反，它是一些像你说的那样执行的 JavaScript。