如何在 React 中加载 HTML 文档答案

【问题标题】：How to load an HTML document in React如何在 React 中加载 HTML 文档
【发布时间】：2020-05-05 17:11:42
【问题描述】：

我正在处理我网站的条款和条件页面。我将实际文档作为 .docx 文件，但使用 Google Docs 我可以将其导出为 .html 文件。

生成的文件是它自己的独立 HTML 元素，带有 Google 加载的自定义样式表。它看起来像这样（总结）：

<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">
       @import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLUXza5VhXqVC6o75Eld_V98');.lst-kix_list_1-3>li:before{content:"\0025cf  "}.lst-kix_l.......
    </style>
</head>
<body class="c16">
    <!-- a bunch of elements with custom classes -->
</body>
</html>

如何使用包含的样式表安全地将这个文档加载到我的 React 组件中？

class TermsAndConditionsPage extends React.Component {
    render() {
       // my custom React code here
       // the HTML doc here...
    }
}

我可以将<body> 标记的内容粘贴到里面，但是我失去了样式。是否可以仅在用户登陆该页面时才加载样式表？

【问题讨论】：

标签： html reactjs

【解决方案1】：

您可以使用dangerouslySetInnerHTML 在 react 组件中插入 html。这将在 div 标记内呈现整个 html。

const content = `<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="content-type">
    <style type="text/css">
       @import url('https://themes.googleusercontent.com/fonts/css?kit=fpjTOVmNbO4Lz34iLyptLUXza5VhXqVC6o75Eld_V98');.lst-kix_list_1-3>li:before{content:"\0025cf  "}.lst-kix_l.......
    </style>
</head>
<body class="c16">
    <div>Test</div>
</body>
</html>`


class TermsAndConditionsPage extends React.Component {
    render() {
       return <div dangerouslySetInnerHTML={{ __html: content }}/>
    }
}

来自docs：

dangerouslySetInnerHTML 是 React 在浏览器 DOM。一般来说，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给cross-site scripting > (XSS) attack。所以，你可以直接从 React 设置 HTML，但是你有输入 dangerouslySetInnerHTML 并传递一个带有 __html 的对象关键，提醒自己这是危险的。

【讨论】：

谢谢，看来可以。 XSS 风险是否来自您插入的 HTML 或样式表可能托管在您无法控制的某个地方？
请通过这个答案了解更多关于这个stackoverflow.com/questions/33644499/…
我使用了您的答案，但为了清楚起见，我使用 webpack 插件html-loader 以更方便的方式将我的 HTML 文件加载为字符串。谢谢！

【解决方案2】：

如果要寻找最简单、最快的方法，dangerouslySetInnerHTML 会像其他答案提到的那样解决问题。

如果您不介意一些手工工作，您可以使用在线工具，例如https://premailer.io/

将imported 表中的所有CSS 声明复制到style 标记内的head 区域
将整个html 文档复制到https://premailer.io/ 的输入区
点击转换

然后您将获得完整的 html 文档，其中内联了每个 CSS 样式，您可以将其用作 JSX。

【讨论】：