Javascript 反应：如何加载和呈现外部html文件？

我正在使用React和Redux构建一个小型博客应用程序。 博客显示文章页面，包括标题、作者、标签和文章描述。当点击标题或“阅读更多”按钮时，我想从本地项目的数据文件夹中加载并呈现一个HTML文件，其中包含相应的文章和所有文章

---

Redux正在管理博客的状态，加载带有8个不同帖子的initial posts.json文件，包括数据文件夹中相应html文件的htmlPath。

如果确实确定，请使用服务器代码从文件系统中以您喜欢的方式将帖子内容发送到前端，并用

危险的LysetinerHTML

在React组件中显示：

function createMarkup() { 
    return {__html: 'First · Second'}; 
};

<div dangerouslySetInnerHTML={createMarkup()} />

函数createMarkup（）{
返回{uuuhtml:'First·；Second'}；
};

---

文档中的更多信息：

我认为您有两个问题需要解决。第一个是如何在React中设置元素的

innerHTML

。另一个是如何根据给定的变量（例如当前路由、文本字段的输入等）获取要呈现的特定HTML

1.设置元素的

innerHTML

您可以使用

DangerouslySetinerHTML

prop执行此操作。顾名思义，它将所述元素的

innerHTML

设置为您指定的任何值。。。是的，“危险”是准确的，因为它的目的是让您在使用此功能之前三思而后行

决议案文如下：

不正确使用innerHTML会使您面临跨站点脚本（XSS）攻击。为显示而清理用户输入是出了名的容易出错，而未能正确清理是互联网上web漏洞的主要原因之一

请查看此内容或下面的代码片段

var Demo=React.createClass({
getInitialState:函数（）{
返回{showExternalHTML:false}；
},
render:function（）{
返回(
切换Html
{this.state.showExternalHTML？
：null}
);
},
toggleExternalHTML:function（）{
this.setState（{showExternalHTML:！this.state.showExternalHTML}）；
},
createMarkup:function（）{
返回{{uuuhtml:'Hello！'}；
}
});
ReactDOM.render(
,
document.getElementById（'容器'）
);
.ext{
边缘顶部：20px；
宽度：100%；
高度：100px；
背景：绿色；
颜色：白色；
字体大小：40px；
文本对齐：居中；
线高：100px；
}

您可以试试。这是最好的。您可以将模板作为一个外部文件，并可以在任何时候加载它，使用所有可用的React API，它将呈现出迷人的效果

希望能有所帮助。
虽然克里斯的回答很好，但还需要进一步挖掘才能使其发挥作用。以下是您需要采取的步骤：

将html加载程序添加到项目中：

npm i -D html-loader

将以下规则添加到webpack.config文件：

{
  test: /\.(html)$/,
  use: {
    loader: 'html-loader',
    options: {
      attrs: [':data-src']
    }
  }
}

现在，您可以按如下方式导入html文件：

import React, { Component } from 'react';
import Page from './test.html';
var htmlDoc = {__html: Page};

export default class Doc extends Component {
  constructor(props){
    super(props);
  }

  render(){
     return (<div dangerouslySetInnerHTML={htmlDoc} />)
}}

import React，{Component}来自'React'；
从“./test.html”导入页面；
var htmlDoc={{uuuu html:Page}；
导出默认类文档扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回（）
}}
是否要将外部html呈现为静态的“原样”，或者是否需要以某种方式对其进行“解析”，或者以某种方式使其与React（例如组件状态）交互？只需呈现它，假设我单击帖子标题“Hello World”，并从文件Hello-World中获取所有呈现的帖子。htmlPeople将为此感到毛骨悚然。听起来不对。然而，人们开始在React中构建应用程序，期待奇迹出现，然后就想用PHP做一些简单、明确、直接的事情。我知道dangerouslySet，我无法完成的事情是当点击链接时，如何使用我在商店中的路径.././data/posts/html/[name].html并将文件的内容加载到视图中。我完全按照您所描述的那样做了，但是我得到了一个类似“samples/myHtmlCode.html”的页面字符串，等等。。。我在测试其他加载程序时也有.html文件。现在它工作了这不适用于从服务器获取html，它只使用html源作为数据url构建您的webpack项目（谁会想这样做？@r3wt，1年后我再次来做我上面所反对的事情…是否有一个安全且推荐的替代加载外部html的方法？@colecm，不知道你的意思。你想实现什么？所以我有一些html作为字符串，通过一个获取调用检索。对于vanillaJS，我会使用
innerHTML
或
insertAdjacentHTML（）
，但对于React，我不确定最佳方法。我正在考虑将字符串转换为JSON，然后通过JSON循环添加组件。@colecm，您尝试过上面的方法1吗？我需要调整设置以使其正常工作，但我会尝试一下。非常感谢@Chris