如何使用带有 raw-loader 的 React 在组件挂载时加载文件

Question

我目前正在使用 raw-loader 加载 Markdown 文件。

webpack.config.dev.js

rules: [
  ...
  {
    oneOf: [
      ...
      {test: /\.md$/, use: 'raw-loader'},
      ...
    ],
  },
],

除了设置渲染器映射之外，Page 组件应该从其 props 中读取路径并将其委托给 ReactMarkdown。这里源代码被硬编码为page/example.md的内容。

src/components/page.js

import ReactMarkdown from 'react-markdown';
import content from '../pages/example.md';

class Page extends React.Component {
  render() {
    return (
      <ReactMarkdown source={content} />
    );
  }
}

src/index.js

import { BrowserRouter as Router, Route } from 'react-router-dom';

function Application() {
  return (
    <Router>
      <Route exact path="/" render={() => <Page source="home.md" />} />
      <Route exact path="/foo/" render={() => <Page source="foo.md" />} />
      <Route exact path="/bar/" render={() => <Page source="bar.md" />} />
    </Router>
  );
}

如何在Page 挂载时动态原始加载通过道具的路径？

Answer 1

src/components/page.js

import ReactMarkdown from 'react-markdown';

class Page extends React.Component {

  state = {content: null};

  componentDidMount() {
    import('../pages/' + this.props.source).then(
      content => this.setState({content: content}),
      () => this.setState({content: null})
    );
  }

  render() {
    let { content } = this.state;
    return content ? (
      <ReactMarkdown renderers={renderers} source={content} />
    ) : null;
  }
}