ReactJS项目中如何读取本地markdown文件并实现内容预览？

以下两种方案都可以实现需求，优先推荐无需修改配置的方案：

方案1：无需修改CRA配置（推荐） #

将markdown文件放到public目录，通过fetch异步读取内容，不需要额外安装依赖、调整构建配置。

步骤1：调整文件位置 #

把你的file.md移动到项目根目录的public文件夹下。

步骤2：修改App.js代码 #

直接用函数组件加Hooks实现读取+渲染，不需要单独封装ReadFileData组件：

import React, { useEffect, useState } from 'react';
import ReactMarkdown from 'react-markdown';
import './App.css';

function App() {
  const [mdContent, setMdContent] = useState('');
  // 读取public目录下的md文件
  useEffect(() => {
    fetch('/file.md')
      .then(res => res.text())
      .then(text => setMdContent(text))
      .catch(err => console.error('读取markdown文件失败:', err));
  }, []);

  return (
    <div className="App">
      <ReactMarkdown>{mdContent}</ReactMarkdown>
    </div>
  );
}

export default App;

方案2：在src目录下直接import md文件 #

如果你坚持要把md文件放在src目录内通过import引入，需要用raw-loader加载markdown的纯文本内容：

步骤1：安装依赖 #

npm install raw-loader --save-dev

步骤2：修改import语法 #

不需要修改CRA构建配置，直接在import时指定loader即可：

import data from 'raw-loader!./file.md';

步骤3：调整渲染逻辑 #

此时拿到的data就是md文件的纯文本内容，直接传给ReactMarkdown即可：

import ReactMarkdown from 'react-markdown';
import data from 'raw-loader!./file.md';
import './App.css';

function App() {
  return (
    <div className="App">
      <ReactMarkdown>{data}</ReactMarkdown>
    </div>
  );
}

export default App;

补全原有ReadFileData组件的方案 #

如果要保留你原有的组件写法，按如下修改即可，前提是你传入的data已经是markdown纯文本字符串：

import React from "react";

class ReadFileData extends React.Component {
  render(){
    const readAbleData = this.props.data || "文件读取失败";
    // 不需要额外包裹标签，直接返回文本内容给外层ReactMarkdown处理
    return readAbleData;
  }
}

export default ReadFileData;

内容的提问来源于stack exchange，提问作者KasRoudra