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

Question

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

7

我想使用Github Gist API获取我的所有Gist并将它们嵌入到网页中。每个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，则可以工作。

我猜这与React组件中script标签的行为有关。我甚至没有想到这会是一个问题。请问有人能推荐一个简单的解决方法，以便我可以成功嵌入这些代码段吗？

谢谢！

- Alex V

你为什么要在这里嵌入一个<script>标签？你希望它能做什么？你是想在这个页面上运行你的gist吗？还是只想展示代码本身？ - Code-Apprentice

你需要使用 iframe 而不是 script。 - Clarity

@Code-Apprentice 我想展示 Gist 的内容 - Alex V

@Clarity 那个方法行不通，这很合理。Gist嵌入链接是一堆JS代码。将其作为iframe导入不会产生相同的效果（我尝试过了，它只会呈现一个空白的iframe）。 - Alex V

4个回答

4

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

非常推荐！

- Alex V

1

很高兴能够帮忙。如果你想知道如何在没有模块的情况下完成它，我已经在这里注释了源代码： https://github.com/msaracevic/react-embed-gist/blob/master/src/ReactEmbedGist.js - Miroslav Saracevic

@MiroslavSaracevic 感谢您制作出如此棒的东西！如果没有 react-embed-gist，我就无法按照自己想要的方式完成我的项目了！ - Alex V

嗨，不清楚如何将ReactEmbedGist方法添加到包含实际文本的Markdown（或MDX）文件中，之后我需要嵌入Gist。你知道怎么做吗？（在MDX文件中没有“导入”的方式。）谢谢。 - Zac1

根据MDX自述文件，您确实可以导入MDX文件：https://github.com/mdx-js/mdx#example - Alex V

谢谢，有没有办法将它显示为暗模式？ - AdityaKapreShrewsburyBoston

2

这个解决方案可以让您在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网址替换为您自己的即可。

框架组件可在以下网址找到： https://www.npmjs.com/package/react-frame-component

- Johann

0

在HTML中，<script>标签嵌入JavaScript代码以执行。它不会显示src属性中指定URL的代码。

来自Gist API的gist对象包含您需要的所有数据。不要尝试自己构建URL。相反，查看gist对象中的其他内容。例如，根据文档, gist.files是一个包含每个Gist文件信息的对象。该对象中的键是文件名，并且这些键包含一个content属性，给出了文件的内容。因此，如果您有一个名为hello.js的文件，可以执行gist.files['hello.js'].content。由于您可能事先不知道该文件，因此可以只循环遍历gist.files对象的键。

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

- Code-Apprentice

不，这个完全是错误的。将以下代码放在一个普通的HTML文档中：<script src="https://gist.github.com/seisvelas/0dded61a10f716793645fe152885b5a5.js"></script>。“显示我的代码”就是它的作用。 - Alex V

是的，它执行JS代码，但是那个JS代码使用了一堆document.writes来创建一个Gist的嵌入式显示。你自己试试就会立刻明白我的意思。这个问题与Gist的API无关。 - Alex V

@seisvelas 好的，我明白你的意思了。我以为链接直接指向你的代码，但实际上不是。相反，它是一些像你说的那样执行的 JavaScript。 - Code-Apprentice

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vikas · Accepted Answer

使用这个npm包，对我很有用。

步骤1：安装该包。

npm i react-gist

步骤2： 在你的React组件中导入

import Gist from "react-gist";

步骤三：输入您的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中特定文件的名称