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

Question

我正在尝试在我的 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 内容，但是当它运行时它会按原样显示文档的路径

例如

Header 带导航

./docs/FirstDoc.md

页脚

和

Header 带导航

./docs/SecondDoc.md

页脚

因为是把它们当作一个字符串。

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

非常感谢你的帮助。

提前致谢

Answer 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。尝试使用 promises 和文件上传来做出反应。我相信你会成功的。

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

Display markdown file from path in react with typescript

markdown

typescript

reactjs