如何在React组件挂载时结合raw-loader加载文件

看起来你已经配置好raw-loader处理Markdown文件了，但目前Page组件的内容是硬编码导入的。要实现从props读取路径并动态渲染对应Markdown内容，可以按以下步骤修改：

1. 重构Page组件（类组件版本） #

去掉硬编码的Markdown导入，改用动态导入来根据props传递的路径加载文件：

import React from 'react';
import ReactMarkdown from 'react-markdown';

class Page extends React.Component {
  state = {
    content: ''
  };

  // 组件挂载时加载初始内容
  componentDidMount() {
    this.loadMarkdownContent();
  }

  // 当路径props变化时，重新加载内容
  componentDidUpdate(prevProps) {
    if (prevProps.mdPath !== this.props.mdPath) {
      this.loadMarkdownContent();
    }
  }

  // 异步加载Markdown文件的方法
  loadMarkdownContent = async () => {
    try {
      // 动态导入指定路径的Markdown文件，raw-loader会返回原始文本
      const importedContent = await import(`../pages/${this.props.mdPath}`);
      this.setState({ content: importedContent.default });
    } catch (error) {
      console.error('加载Markdown文件失败:', error);
      this.setState({ content: '无法加载内容，请检查文件路径是否正确。' });
    }
  };

  render() {
    return (
      <div className="page-container">
        <ReactMarkdown source={this.state.content} />
      </div>
    );
  }
}

export default Page;

2. 函数组件版本（可选，更简洁） #

如果你倾向于使用函数组件和Hooks，可以这样写：

import React, { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';

const Page = ({ mdPath }) => {
  const [content, setContent] = useState('');

  useEffect(() => {
    const loadMarkdown = async () => {
      try {
        const importedContent = await import(`../pages/${mdPath}`);
        setContent(importedContent.default);
      } catch (err) {
        console.error('Markdown加载错误:', err);
        setContent('内容加载失败，请验证文件路径。');
      }
    };

    loadMarkdown();
  }, [mdPath]); // 当mdPath变化时重新执行

  return <ReactMarkdown source={content} />;
};

export default Page;

3. 使用组件时传递路径Props #

现在你可以在父组件中通过mdPath props指定要加载的Markdown文件：

// 加载example.md
<Page mdPath="example.md" />

// 加载其他文件，比如about.md
<Page mdPath="about.md" />

关键细节说明 #

• 动态导入规则：Webpack需要能解析动态路径的固定部分，所以../pages/${mdPath}这种写法是可行的（Webpack会预编译../pages目录下所有Markdown文件作为潜在的chunk），避免使用完全动态的路径（比如仅用变量mdPath）。
• 错误处理：加入了try/catch逻辑，防止文件路径错误或加载失败导致组件崩溃。
• props变化监听：无论是类组件的componentDidUpdate还是函数组件的useEffect依赖数组，都能确保当路径变化时重新加载对应内容。

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