我使用 React 和 Redux 构建了一个小型博客应用程序。博客显示带有标题、作者、标签和帖子描述的帖子页面。当单击标题或“阅读更多”按钮时，我想从本地项目的数据文件夹中加载并呈现一个带有相应帖子的 HTML 文件，其中包含所有帖子。
Redux 正在管理博客的状态，加载带有 8 个不同帖子的初始 posts.json 文件，包括数据文件夹中相应 html 文件的 htmlPath。
React：如何加载和呈现外部 html 文件？
IT技术
javascript
html
reactjs
redux
2021-03-15 03:25:21
4个回答
我的看法是你在这里有两个问题需要解决。第一个是如何innerHTML在 React 中设置元素的 。另一个是如何根据给定的变量（例如当前路由、文本字段的输入等）获取要呈现的特定 HTML。
1. 设置innerHTML元素的
你可以用dangerouslySetInnerHTMLprops做到这一点。顾名思义，它将innerHTML所述元素的 设置为您指定的任何内容……是的，“危险”是准确的，因为它旨在让您在使用此功能之前三思而后行。
在官方文档内容如下：
对innerHTML 的不当使用会使您面临跨站点脚本（XSS）攻击。众所周知，清理用于显示的用户输入容易出错，而未能正确清理是 Internet 上 Web 漏洞的主要原因之一。
查看此演示或下面的代码段。
var Demo = React.createClass({
getInitialState: function() {
return {showExternalHTML: false};
},
render: function() {
return (
<div>
<button onClick={this.toggleExternalHTML}>Toggle Html</button>
{this.state.showExternalHTML ? <div>
<div dangerouslySetInnerHTML={this.createMarkup()} ></div>
</div> : null}
</div>
);
},
toggleExternalHTML: function() {
this.setState({showExternalHTML: !this.state.showExternalHTML});
},
createMarkup: function() {
return {__html: '<div class="ext">Hello!</div>'};
}
});
ReactDOM.render(
<Demo />,
document.getElementById('container')
);.ext {
margin-top: 20px;
width: 100%;
height: 100px;
background: green;
color: white;
font-size: 40px;
text-align: center;
line-height: 100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>2. 从外部获取 HTML
请注意，上面的示例实际上并没有从外部文件中获取 HTML，而是直接作为字符串输入。
动态获取选择特定文件的一种简单方法是让您的后端（例如 php）从本地文件夹读取文件，解析文本，然后通过 AJAX 请求将其发送回。
例子
//Your React component
fetchExternalHTML: function(fileName) {
Ajax.getJSON('/myAPI/getExternalHTML/' + fileName).then(
response => {
this.setState({
extHTML: response
});
}, err => {
//handle your error here
}
);
}
虽然克里斯的回答很好，但需要更多的挖掘才能使其发挥作用。以下是您需要采取的步骤：
将 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} />)
}}
你可以试试react-templates。这是'最好的'。你可以将你的模板作为一个外部文件，并且可以随时加载它，它会像所有可用的 React API 一样呈现魅力。
希望能帮助到你。
如果您真的确定，请使用服务器代码从文件系统中获取您喜欢的帖子内容，并将其显示在 React 组件中dangerouslySetInnerHTML：
function createMarkup() {
return {__html: 'First · Second'};
};
<div dangerouslySetInnerHTML={createMarkup()} />
更多文档：https : //facebook.github.io/react/tips/dangerously-set-inner-html.html