我使用 React 和 Redux 构建了一个小型博客应用。 博客显示带有标题、作者、标签和帖子描述的帖子页面。单击标题或“阅读更多”按钮时,我想加载并呈现一个 HTML 文件,其中包含本地项目数据文件夹中的所有帖子。
Redux 正在管理博客的状态,加载包含 8 个不同帖子的初始 posts.json 文件,包括数据文件夹中相应 html 文件的 htmlPath。
最佳答案
在我看来,您在这里有 2 个问题需要解决。首先是如何在 React 中设置元素的 innerHTML
。另一个是如何根据给定的变量(例如当前路径、文本字段的输入等)获取特定的 HTML 来呈现。
1。设置元素的innerHTML
您可以使用 dangerouslySetInnerHTML
属性来做到这一点。顾名思义,它将所述元素的 innerHTML
设置为您指定的任何内容……是的,“危险”是准确的,因为它旨在让您在使用此功能之前三思而后行。
Improper use of the innerHTML can open you up to a cross-site scripting (XSS) attack. Sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet.
看看这个 Demo或下面的代码片段。
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
}
);
}
关于javascript - react : how to load and render external html file?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40108843/