使用静态HTML与React

Question

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

作为React的练习，我正在尝试构建一个导航菜单，根据活动项或选项卡显示不同的内容。这些不同的视图将在我的目的下是静态的，主要是信息性质的，可能会包含一些嵌入式音频或视频。但是每个视图中可能会有很多内容。对我来说，最合理的做法是创建单独的HTML文件，并在这些不同的视图中使用它们的内容。然而，如果没有使用外部库，我唯一能想到的方法就是将每个视图的静态内容放在其自己的React组件中，仅渲染该静态内容。

对我来说，这似乎很愚蠢。在React中是否有实现我所要求的功能的方法？如果没有，是否有轻量级或广泛使用的库可以让我完成这个功能？提前感谢！

- SethGunnells

---

如果您认为jQuery是轻量级的，那么您可以使用jQuery的load函数。该函数允许加载外部HTML并将其注入页面中。 - Becojo

除非我错了，jQuery的load函数使用AJAX来获取相关的HTML内容，对吧？这是一个相当不错的解决方案，但如果我能够在不涉及更多网络流量的情况下直接在页面中进行组合就更好了。看起来这可能需要一个构建步骤，涉及到创建一些HTML字符串并与脚本一起发送。 - SethGunnells

看起来可能有一些gulp插件可以做我想要的事情，但它们很少被使用，这让我想知道是否没有人遇到和我一样的问题，或者我走错了路。 - SethGunnells

Answer 1

如果您希望在页面加载时加载所有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 组件没有错，但并不适用于所有类型的内容。如果你需要一个有大量交互式组件的页面，则将其表示为组件可能是有意义的。

- Brigand

---

这非常符合我的预期。似乎有一些Gulp插件可以实现这一点。我可能会尝试一下。不过，看起来我在认为这是一个问题上大多数人都不这么认为，这让我想知道它是否真的是一个问题。我想我想要能够将静态内容存储在HTML文件中的主要原因是我使用的工具在JSX中没有像在HTML中那样方便。 - SethGunnells

Answer 2

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

我的同事创建了这个库来完成这个任务：”

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

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

- Matt Holland

---

我该如何在Asp.Net MVC项目中使用htm-to-react？在互联网上查找了很多，但都没有找到简单的答案。 - Faisal Mq

该模块可通过NPM获得。您应该能够将其导入到ASP项目中。我从未使用过ASP，因此无法提供更多详细信息。 - Matt Holland