显示README.Md文件内容

Question

我正在下载README。在react中使用axios。内容在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

codesandbox链接https://codesandbox.io/s/floral-wave-8rf4l?file=/src/App.js:0-590.

如何呈现自述文件内容?

Answer 1

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

1。将字符串转换为Base64(MDN描述btoa)

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

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

2。将Base64转换为String(MDN描述)

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>
);