[英]How to import a markdown file in a typescript react-native project?
I have tried to import a markdown file into my typescript react-native project in 2 ways.我尝试以两种方式将 Markdown 文件导入到我的 typescript react-native 项目中。
import * as readme from "./sample.md"
import readme from "./sample.md"
Both didn't work.两者都不起作用。 So I found a similar issue reported previously and mentioned about making a typings.d.ts file for declaring modules, and i've tried this as well but it still doesn't work.
所以我发现了之前报告的类似问题,并提到了创建用于声明模块的typings.d.ts 文件,我也尝试过这个,但它仍然不起作用。
declare module "*!txt" {
const value: any;
export default value;
}
declare module "*.md" {
const value: any;
export default value;
}
EDIT: There is no import error on Vscode but on the react-native app itself, it says that it cannot find module './sample.md' as it is only looking for (.native|.ios|.json|.ts etc) files.编辑:在 Vscode 上没有导入错误,但是在 react-native 应用程序本身上,它说它找不到模块 './sample.md' 因为它只是在寻找 (.native|.ios|.json|.ts等)文件。
Any help would be appreciated, been stuck on this for far too long.任何帮助将不胜感激,被困在这太久了。 Thank you!
谢谢!
declare module "*.md";
tsconfig.json -> CompilerOptions -> typeRoots
as followingtsconfig.json -> CompilerOptions -> typeRoots
如下{
"compilerOptions": {
...
"typeRoots": [ "<types-directory-created-in-#1>", "./node_modules/@types"],
...
}
}
import React, { useEffect, useState } from 'react';
import readme from 'path/filename.md';
export default function ComponentName() {
const [md, setMD] = useState("");
//Use componentDidMount(): if class based component to load md file
useEffect(() => {
fetch(readme)
.then(data => data.text())
.then(text => {
setMD(text);
})
}, []);
return (
<div>{md}</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.