如何使用带原始加载程序的 React 在组件安装上加载文件

Question

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

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 挂载时动态地 raw-load 通过 props 的路径？

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;
  }
}

如何使用带原始加载程序的 React 在组件安装上加载文件

How to load a file on component mounting using React w/ raw-loader

reactjs

raw-loader