React：如何加载和渲染外部 html 文件？

Question

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

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

原文由 Intermundos 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

1.设置元素的 innerHTML

您可以使用 dangerouslySetInnerHTML 道具来做到这一点。顾名思义，它将所述元素的 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
    }
  );
}

原文由 Chris 发布，翻译遵循 CC BY-SA 4.0 许可协议