Question

我试图用两种方法将markdown文件导入到我的打字稿react-native项目中。

import * as readme from "./sample.md"

import readme from "./sample.md"

两个都不起作用。因此，我找到了a similar issue reported previously，并提到过要创建用来声明模块的types.d.ts文件，我也尝试过这样做，但仍然无法正常工作。

declare module "*!txt" {
    const value: any;
    export default value;
}

declare module "*.md" {
    const value: any;
    export default value;
}

编辑： Vscode上没有导入错误，但是react-native应用程序本身没有错误，它说它找不到模块'./sample.md'，因为它只是在寻找（.native | .ios | .json | .ts等）文件。

任何帮助都将不胜感激，因为坚持太久了。谢谢！

Answer 1

在项目目录之一中创建一个类型定义（ index.d.ts ）文件，然后输入以下代码。

declare module "*.md";

添加tsconfig.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>
    )
}

如何在Typescript react-native项目中导入markdown文件？

1 个答案: