如果您希望在页面加载时加载所有HTML内容,则应该在构建过程或服务器中动态创建脚本:
var PAGE_HTML={"page1.html": "...","page2.html":"..."};
你可以在Node中像这样处理目录:
var readAll = require('read-dir-files').read;
readAll('./pages', 'utf-8', false, function(err, files){
if (err) return doSomething(err);
fs.writeFile('dist/pages.js', "var PAGE_HTML=" + JSON.stringify(files), function(err){
});
});
在React中,你可以拥有以下结构:
var App = React.createClass({
getInitialState: function(){ return {page: "page2.html"} },
navigate: function(toPage){
this.setState({page: toPage})
},
render: function(){
return <div>
<ul>
<li onClick={this.navigate.bind(null, "page1.html")}>Page 1</li>
</ul>
<div dangerouslySetInnerHTML={{__html: PAGE_HTML[this.state.page]}} />
</div>;
}
});
顺便说一下:将页面内容作为 React 组件没有错,但并不适用于所有类型的内容。如果你需要一个有大量交互式组件的页面,则将其表示为组件可能是有意义的。