在 React 中使用静态 HTML答案

【问题标题】：Using Static HTML with React在 React 中使用静态 HTML
【发布时间】：2015-02-12 21:55:36
【问题描述】：

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

作为 React 的实践，我正在尝试构建一个导航菜单，该菜单根据活动项目或选项卡显示不同的内容。出于我的目的，这些不同的视图本质上是静态的，主要是信息性的，可能包含一些嵌入的音频或视频。但是每个视图中可能有很多内容。对我来说，创建单独的 HTML 文件并在这些不同的视图中使用它们的内容是最有意义的。但是，我认为不使用外部库的唯一方法是将每个视图的静态内容放在它自己的 React 组件中，该组件除了呈现静态内容之外什么都不做。

这对我来说似乎很愚蠢。有什么方法可以完成我在 React 中尝试做的事情吗？如果没有，是否有一个轻量级或广泛使用的库可以让我完成这项工作？提前致谢！

【问题讨论】：

如果您认为 jQuery 轻量级，您可以只使用 jQuery 的加载功能...该功能允许加载外部 HTML 并将其注入页面。
除非我错了，jQuery 的加载函数使用 AJAX 来检索有问题的 HTML，对吗？一个很好的解决方案，但如果我可以在不涉及更多网络流量的情况下将其组合起来，那就更好了。似乎它可能必须是一个构建步骤，涉及某种 HTML 字符串被创建并与脚本一起发送。
看起来可能有一些 gulp 插件可以做我想做的事，但它们几乎没有被使用，这总是让我想知道是否没有人遇到与我相同的问题，或者我是否要去这是错误的方式。

标签： javascript html reactjs

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

【讨论】：

这很像我的预期。似乎有一些 gulp 插件可以做到这一点。我可以试一试。不过，似乎只有我一个人认为这是一个问题，这总是让我怀疑它是否真的是一个问题。我想我希望能够将我的静态内容存储在 HTML 文件中的主要原因是我使用的工具在 JSX 中没有给我带来与在 HTML 中相同的便利。

【解决方案2】：

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

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

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

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

【讨论】：

如何在 Asp.Net MVC 项目中使用 htm-to-react？在互联网上查看，但找不到简单的答案。
该模块可通过 NPM 获得。您应该能够将它导入到您的 ASP 项目中。我从来没有使用过 ASP，所以我无法详细说明。