使用静态HTML和React

Question

我正在学习如何使用React,到目前为止,我非常喜欢它.但是,我遇到了一些问题.

作为React的练习,我正在尝试构建一个导航菜单,根据活动项目或选项卡显示不同的内容.就我的目的而言,这些不同的观点本质上是静态的,主要是对一些嵌入式音频或视频提供信息.但每个视图中可能有很多内容.对我来说,最有意义的是创建单独的HTML文件并在这些不同的视图中使用它们的内容.但是,我可以看到在不使用外部库的情况下执行此操作的唯一方法是将每个视图的静态内容放在其自己的React组件中,该组件除了呈现静态内容之外什么都不做.

这对我来说似乎很愚蠢.有没有办法完成我在React尝试做的事情？如果没有,是否有一个轻量级或广泛使用的库,这将允许我完成这个？提前致谢!

Answer 1

如果要在页面加载时加载所有html，则应在构建过程或服务器中动态创建脚本：

var PAGE_HTML={"page1.html": "...","page2.html":"..."};

您可以在节点中为以下目录执行此操作：

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组件并没有错，这并不是所有内容类型的最佳格式。如果您需要一个包含大量交互式组件的页面，那么将其表示为组件可能很有意义。