reactjs - 如何使用带有 raw-loader 的 React 在组件挂载时加载文件
问题描述
我目前正在使用raw-loader
.
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
?
解决方案
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;
}
}
推荐阅读
- php - 我可以同时定义 slick、bootstrap 和 corusel 吗?
- angular - Angular Datatable-在角度 5 中第二次更新表时没有刷新
- javascript - 如何在jquery中从表行和列中获取所有值到数组
- javascript - 如何在我用 nextjs 编写的主页中添加 html 和 css
- php - 我正在向我的 API 发布一组对象。如何访问这些对象的属性?
- python - 如何更改标签标题框的大小和 ttk 笔记本标签的字体?
- macos - 对 macOS 的 Crashlytics 支持
- react-native - react-native run-ios --device 在 react-native 之后没有任何反应
- zendesk - 如何将现有的电话系统与 Zendesk 连接?
- sql - 数据集的最小值和总和