时间戳

首页 > 解决方案 > 如何在 React 中加载 HTML 文档

html - 如何在 React 中加载 HTML 文档

问题描述

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

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

<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>标签的内容粘贴到里面，但是我失去了样式。是否可以仅当用户登陆此页面时才加载样式表？

标签： htmlreactjs

解决方案

您可以使用dangerouslySetInnerHTML在反应组件中插入 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 }}/>
    }
}

从文档：

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

推荐阅读