显示 README.md 文件内容

Question

我在 react 中使用axios下载 README.md 文件内容。 内容加载在base64 。 我想显示这个自述文件中的所有内容。 我遵循了这些答案，但没有一个对我有用。 下面是我的代码。

import "./styles.css";
import { useEffect, useState } from 'react';
import axios from 'axios';

export default function App() {
  const [md, setMd] = useState('');
  useEffect(() => {
        async function fetchReadMeContents() {
            const response = await axios({
                url: "https://api.github.com/repos/zafar-saleem/anymnd/git/blobs/7af90ceab018a889b46634331cab822d94ff2b19",
            });
            console.log('response: ', response.data);
            const text = await response.data.content;
            setMd(text);
        }
        fetchReadMeContents();
    }, []);
  return (
    <code className="App">
      {md}
    </code>
  );
}

上面的代码呈现在下面。

IyMgUmVxdWlyZW1lbnRzCkJlbG93IGlzIHRoZSBnZXR0aW5nIHN0YXJ0ZWQg c2VjdGlvbiB0byBzdGFydCB0aGUgcHJvamVjdC4gRm9yIG1vcmUgZGV0YWls cywgcGxlYXNlIHJlYWQgdGhlIFt3aWtpXShodHRwczovL2dpdGh1Yi5jb20v emFmYXItc2FsZWVtL2JyZWxhLXRlc3Qvd2lraSkgcGFnZS4KCiMjIEdldHRp bmcgc3RhcnRlZApJbiBvcmRlciB0byBydW4gdGhpcyBwcm9qZWN0IGluIHRo ZSBicm93c2VyIHN1Y2Nlc3NmdWxseSwgcGxlYXNlIGZvbGxvdyB0aGUgc3Rl cHMgYmVsb3chCgogICAgMS4gQ2xvbmUgdGhpcyByZXBvc2l0b3J5LgogICAg Mi4gY2QgaW50byBgL3Jvb3RgIGkuZS4gYGJyZWxhLXRlc3QvYCBkaXJlY3Rv cnkuCiAgICAzLiBSdW4gYHlhcm4vbnBtIGluc3RhbGxgIGNvbW1hbmQgdG8g ZG93bmxvYWQgYW5kIGluc3RhbGwgYWxsIGRlcGVuZGVuY2llcy4KICAgIDQu IFRvIHJ1biB0aGlzIHByb2plY3QgdXNlIGBucG0gc3RhcnQveWFybmAgY29t bWFuZCBpbiBjb21tYW5kIGxpbmUuCiAgICA

这是代码和框链接https://codesandbox.io/s/floral-wave-8rf4l?file=/src/App.js:0-590 。

如何呈现自述文件内容？

Answer 1

您可以使用atob()和btoa()内置函数将 base64 和字符串一起转换。

1.将字符串转换为Base64 （ MDN描述了btoa ）

btoa()方法从二进制字符串（即，字符串中的每个字符都被视为一个二进制数据字节的 String 对象btoa()创建一个 Base64 编码的 ASCII 字符串。

const encodedData = btoa('Hello, world'); // encode a string

2. 将 Base64 转换为字符串（ MDN 描述了 atob ）

atob()函数对使用 Base64 编码的数据字符串进行解码。

const decodedData = atob(encodedData); // decode the string

因此，您可以使用以下代码来呈现 README.md 文件的内容。

useEffect(() => {
  async function fetchReadMeContents() {
    const response: any = await axios({
      url: readmeFileUrl,
    });
    const text: any = await response.text();
    if (response.status === 200) {
      setMd(atob(text));
    }
  }
  if (readmeFileUrl) {
    fetchReadMeContents();
  }
}, [readmeFileUrl]);

return (
  <code>{md}</code>
);