javascript 在 React 中使用静态 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27473280/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Static HTML with React
提问by SethGunnells
I'm learning how to use React and, so far, I am very much enjoying it. However, I am running into a bit of a problem.
我正在学习如何使用 React，到目前为止，我非常喜欢它。但是，我遇到了一些问题。
As practice with React, I'm trying to build a navigation menu that shows different content based on the active item or tab. These different views will, for my purposes, be static in nature, mainly informative with maybe some embedded audio or video. But there may be a lot of content in each view. To me, it makes the most sense to create separate HTML files and use their content in these different views. However, the only way I can see to do this without the use of an external library is to put the static content for each view in its own React component that does nothing but render that static content.
作为 React 的练习，我正在尝试构建一个导航菜单，根据活动项目或选项卡显示不同的内容。就我而言，这些不同的视图本质上是静态的，主要是包含一些嵌入的音频或视频的信息。但是每个视图中可能有很多内容。对我来说，创建单独的 HTML 文件并在这些不同的视图中使用它们的内容是最有意义的。但是，我可以看到在不使用外部库的情况下做到这一点的唯一方法是将每个视图的静态内容放在它自己的 React 组件中，该组件只渲染静态内容。
This seems silly to me. Is there some way to accomplish what I'm trying to do in React? If not, is there a lightweight or widely-used library out there that will allow me to accomplish this? Thanks in advance!
这对我来说似乎很愚蠢。有什么方法可以完成我在 React 中尝试做的事情吗？如果没有，是否有一个轻量级或广泛使用的库可以让我做到这一点？提前致谢！
回答by Brigand
If you would like to load all of the html at page load time, you should dynamically create a script in your build process or server:
如果您想在页面加载时加载所有 html，您应该在构建过程或服务器中动态创建一个脚本：
var PAGE_HTML={"page1.html": "...","page2.html":"..."};
You can do this in node for a directory like this:
您可以在节点中为这样的目录执行此操作：
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){
// ...
});
});
In React you can then have a structure like this:
在 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>;
}
});
Side note: there's nothing wrong with having React components for page content, it's just not the best format for all types of content. If you need a page where you'll have lots of interactive components, then it might make sense to represent it as a component.
旁注：将 React 组件用于页面内容并没有错，只是它不是所有类型内容的最佳格式。如果您需要一个包含大量交互式组件的页面，那么将其表示为一个组件可能是有意义的。
回答by Matt Holland
We recently had a similar issue of trying to integrate static HTML into our React application (In this case the HTML was a template which would have React components 'injected' into it, so it was potentially a little more complex than your situation). Like you, we wanted to be able to create raw HTML (So that it could be generated by standard tools).
我们最近在尝试将静态 HTML 集成到我们的 React 应用程序中时遇到了类似的问题（在这种情况下，HTML 是一个模板，可以将 React 组件“注入”到其中，因此它可能比您的情况更复杂一些）。像您一样，我们希望能够创建原始 HTML（以便它可以由标准工具生成）。
A colleague created this library to accomplish the task:
一位同事创建了这个库来完成任务：
https://github.com/mikenikles/html-to-react
https://github.com/mikenikles/html-to-react
It parses the HTML tree, converting it into a 'React tree' which you can embed into a React component. This avoids the use of dangerouslySetInnerHtml and doesn't require any build-time pre-processing on the HTML.
它解析 HTML 树，将其转换为“React 树”，您可以将其嵌入到 React 组件中。这避免了危险的SetInnerHtml 的使用，并且不需要对HTML 进行任何构建时预处理。
