javascript - 在 React 中使用静态 HTML

Question

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

作为 React 的练习，我尝试构建一个导航菜单，根据事件项目或选项卡显示不同的内容。就我的目的而言，这些不同的 View 本质上是静态的，主要是提供一些嵌入的音频或视频的信息。但是每个 View 中可能有很多内容。对我来说，创建单独的 HTML 文件并在这些不同的 View 中使用它们的内容是最有意义的。然而，我能看到在不使用外部库的情况下做到这一点的唯一方法是将每个 View 的静态内容放在它自己的 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 组件用于页面内容并没有错，只是它不是适用于所有类型内容的最佳格式。如果您需要一个包含大量交互式组件的页面，那么将其表示为一个组件可能是有意义的。