import React, {PureComponent} from 'react'
|
import './DocPage.css'
|
|
export default class DocPage extends PureComponent {
|
constructor(props) {
|
super(props);
|
this.state = {
|
htmlString: '<h3>正在加载中...</h3>'
|
};
|
}
|
//
|
componentDidUpdate(prevProps) {
|
// 当 URL 中的 page 参数变化时重新加载
|
if (this.props.match.params.page !== prevProps.match.params.page) {
|
this.componentDidMount();
|
}
|
}
|
|
componentDidMount() {
|
// 从 URL 参数获取 page（如 /docs/page1 → page="page1"）
|
let {page} = ((this.props.match || {}).params) || {};
|
if (!page) {
|
page = "readme";
|
}
|
|
// 动态拼接文件路径（假设 .md 文件放在 public/docs 目录）
|
const mdFilePath = `${page}.md`; // 注意：生产环境建议用绝对路径
|
fetch(mdFilePath)
|
.then(response => response.text())
|
.then(mdText => {
|
this.setState({htmlString: window.marked.parse(mdText)});
|
})
|
.catch(error => {
|
console.error('加载 Markdown 文件失败:', error);
|
this.setState({htmlString: '<h3>加载失败，请检查文件路径</h3>'});
|
});
|
}
|
|
render() {
|
return (
|
<div className={"doc_wrapper"}>
|
<div dangerouslySetInnerHTML={{__html: this.state.htmlString}}></div>
|
</div>
|
)
|
}
|
}
|
