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组件没有任何问题，它不是所有类型内容的最佳格式。如果您需要一个可以拥有大量交互式组件的页面，那么将其表示为组件可能是有意义的。

Answer 2

我们最近遇到了类似的问题，试图将静态HTML集成到我们的React应用程序中（在这种情况下，HTML是一个模板，可以将React组件“注入”它，因此它可能比您的情况稍微复杂一点）。和你一样，我们希望能够创建原始HTML（因此可以通过标准工具生成）。

一位同事创建了这个库来完成任务：

https://github.com/mikenikles/html-to-react

它解析HTML树，将其转换为“React树”，您可以将其嵌入到React组件中。这样可以避免使用dangerouslySetInnerHtml，并且不需要对HTML进行任何构建时预处理。

使用静态HTML和React

2 个答案: