Как загрузить файл при монтировании компонента, используя React с raw-загрузчиком - PullRequest
Новая
       14

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

0 голосов
/ 03 мая 2018

Я сейчас загружаю файлы 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>
  );
}

Как я могу динамически raw-load путь, пройденный через реквизиты, пока Page монтируется?

1 Ответ

0 голосов
/ 07 мая 2018

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