Как загрузить документ HTML в React - PullRequest
Новая
       0

Как загрузить документ HTML в React

0 голосов
/ 05 мая 2020

Я работаю над страницей Положений и условий моего веб-сайта. У меня есть фактический документ в виде файла .docx, но с помощью Документов Google я могу экспортировать его как файл .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> внутрь, но тогда я потеряю стиль. Можно ли загрузить таблицу стилей только тогда, когда пользователь попадает на эту страницу?

Ответы [ 2 ]

1 голос
/ 05 мая 2020

Вы можете использовать dangerouslySetInnerHTML для вставки html в компонент реакции. Это отобразит весь html внутри тега div. 

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 для использования внутреннего HTML в DOM браузера. В общем, установка HTML из кода является рискованной, потому что легко непреднамеренно выставить своим пользователям доступ к cross-site scripting > (XSS) attack. Итак, вы можете установить HTML прямо из React, но вам нужно набрать dangerouslySetInnerHTML и передать объект с ключом __html, чтобы напомнить себе, что это опасно.

0 голосов
/ 05 мая 2020

Если вы ищете самый простой и быстрый метод, dangerouslySetInnerHTML подойдет, как упоминается в другом ответе.

Если вы не против ручной работы, вы можете использовать онлайн-инструменты, такие как https://premailer.io/

  1. скопировать все CSS объявления в import ed лист в head область внутри style тега
  2. скопировать весь html документ в область ввода https://premailer.io/
  3. hit convert

В результате вы получите полный документ html со всеми встроенными стилями CSS, который можно использовать как JSX.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...