显示路径中的降价文件与打字稿反应

Posted 2023-02-21

【中文标题】显示路径中的降价文件与打字稿反应

【英文标题】：Display markdown file from path in react with typescript

【发布时间】：2022-01-24 00:20:53

【问题描述】：

我正在尝试在我的 react/typescript 应用程序中创建一些到不同 .md 文件的路由。

我的 App.tsx 有这个：

<Router>
  <main>
    <nav className="navbar navbar-expand-md navbar-light bg-white sticky-top px-3">
      <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent">
        <ul className="navbar-nav mb-2 mb-lg-0">
          <li className="nav-item">
            <a className="nav-link active" href="/#About">About</a>
          </li>
          <li className="nav-item">
            <a className="nav-link active" href="/FirstDoc">FirstDoc</a>
          </li>
          <li className="nav-item">
            <a className="nav-link active" href="/SecondDoc">SecondDoc</a>
          </li>
         </ul>
       </div>
     </nav>
     <Routes>
       <Route path="/" element=<Home />></Route>
       <Route path="/FirstDoc" element=<FIFI />></Route>
       <Route path="/SecondDoc" element=<SESE />></Route>
     </Routes>

     <div className="row row-cols-sm-1 py-5 m-0 text-center">
       <hr className="my-4"/>
       <div className="col p-3">
         <p className="m-0">This is my footer</p>
       </div>
     </div>
   </main>
 </Router>

我正在从一个名为 MdFiles.tsx 的文件中导入 FirstDoc 和 SecondDoc，如下所示：

import React, FC from "react"
import ReactMarkdown from 'react-markdown'

const fifiDoc = "./docs/FirstDoc.md"
const seseDoc = "./docs/SecondDoc.md"

const FIFI: FC = () => 
  return(
    <ReactMarkdown children=fifiDoc />
  );


const SESE: FC = () => 
      
  return(
    <ReactMarkdown children=seseDoc />
  );


export FIFI, SESE;

我希望我的应用在路由容器内显示 de .md 内容，但当它运行时，它会按原样显示文档的路径

例如

带导航的标题

./docs/FirstDoc.md

页脚

和

带导航的标题

./docs/SecondDoc.md

页脚

因为将它们作为字符串。

我需要它来获取路径相关文件中的文本并显示它，我很想在创建 const fifiDoc 和 const seseDoc 时写下所有内容，但是很长并且会更好从 .md 文件中导入它。

感谢您的帮助。

提前致谢

【参考方案1】：

你可以试试这个代码：

const [text, setText] = useState('')
useEffect(()=>
const firstPath = require("./firstDoc.md");

  fetch(firstPath)
    .then(response => 
      return response.text()
    )
    .then(text => setText(text))
,[])

然后将此文本传递给带有 children 属性的组件。

<ReactMarkdown children=text />

或

<ReactMarkdown>text</ReactMarkdown>

看看这些article。玩转承诺和文件上传以做出反应。 我相信你会成功的。

【讨论】：

(not OP) 不知道为什么，但是在使用您的方法获取 firstPath 时出现代理错误，并且不想弄清楚原因（我的设置使用 react & express），所以我使用了@ 987654325@ 成功了。

为我服务，只是做了一些调整，在我的情况下，我必须在使用 fetch 时添加 .default