Как загрузить файл при монтировании компонента с помощью React с raw-загрузчиком

Question

В настоящее время я загружаю файлы Markdown, используя raw-loader,

webpack.config.dev.js

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

Помимо установки карты рендеров, Page Компонент должен прочитать путь от своего реквизита и передать его 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;
  }
}