反应：如何加载和渲染外部html文件？ [英] React: how to load and render external html file?

问题描述

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

Redux正在管理博客的状态，加载包含8个不同文章的初始posts.json文件，其中包括用于数据文件夹中相应html文件的htmlPath。

解决方案

我看到的方式是你在这里要解决2个问题。首先是如何在React中设置元素的 innerHTML 。另一个是如何根据给定的变量（例如当前路线，文本字段的输入等）获取特定的HTML来呈现。

1。设置元素的 innerHTML

您可以使用危险地设置内联HTML 道具。顾名思义，它将所述元素的 innerHTML 设置为您指定的任何内容......并且是的，危险地是准确的，因为它旨在让您在之前思考三次使用此功能。

官方文档 的内容如下：

不正确地使用innerHTML can打开你的一个跨站点脚本（XSS）攻击。消毒显示用户输入是出了名的错误，并且未能正确消毒是网络漏洞的主要原因之一。

查看此 演示 或以下代码段。

var Demo = React.createClass（{getInitialState：function（）{return {showExternalHTML：false}; }，render：function（）{return（< div>< button onClick = {this.toggleExternalHTML}>切换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;宽度：100％; height：100px;背景：绿色;白颜色; 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请求发回。
 
 
 
示例
 
 
 
  //您的React组件
 fetchExternalHTML：function（fileName）{
 Ajax.getJSON（'/ myAPI / getExternalHTML /'+ fileName）.then（
 response => {
 this。 setState（{
 extHTML：response 
}）; 
}，err => {
 //在这里处理您的错误
} 
）; 
} 
  
 
I building a small blog app using React and Redux. 
The blog show Posts page with title, author, tags and description of a post. When clicking on title or "read more" button, I want to load and render an HTML file with corresponding post from a local project's data folder with all the posts.

Redux is managing the state of the blog, loading initial posts.json file with 8 different posts, including htmlPath for the corresponding html file in the data folder.
解决方案
The way I see it is that you have 2 problems to solve here. The first is how to set the innerHTML of an element in React. The other is how to get a specific HTML to render depending on a given variable (e.g the current route, the input of a textfield, etc).

1. Setting the innerHTML of an element

You can do this with the dangerouslySetInnerHTML prop. As the name suggests it sets the innerHTML of the said element to whatever you specify... and yes, the "dangerously" is accurate as it's intended to make you think twice before using this feature.

The Official Documentation reads as follows:

  
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.
Check out this Demo or the snippet below.



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. Fetching the HTML from an external source

Note that the above example does not actually get the HTML from an external file, but is entered directly as a string. 

One simple way to do dynamically fetch a choose a specific file would be to let your backend (e.g php) read the file from a local folder, parse the text, and send it back through an AJAX request.

Example

//Your React component
fetchExternalHTML: function(fileName) {
  Ajax.getJSON('/myAPI/getExternalHTML/' + fileName).then(
    response => {
      this.setState({
        extHTML: response
      });
    }, err => {
      //handle your error here
    }
  );
}


                        
这篇关于反应：如何加载和渲染外部html文件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！