我目前正在使用 raw-loader
加载 Markdown 文件。
webpack.config.dev.js
rules: [
...
{
oneOf: [
...
{test: /\.md$/, use: 'raw-loader'},
...
],
},
],
除了设置渲染器 map 之外,Page
组件还应该从其 props 中读取路径并将其委托(delegate)给 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
时动态原始加载通过 props 传递的路径?
最佳答案
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;
}
}
关于reactjs - 如何使用 React with/raw-loader 在组件安装时加载文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50151759/