Задать вопрос
TheSnegok
@TheSnegok
react

Как вставить страницу html в react созданный с помощью create-react-app?

Пытаюсь вставить страницу с помощью нового компонента:
var html = require('./index.html');
const RegForm = () => {
    return (
        <div>
            <iframe src={html}></iframe>
        </div>
    )
}

export default RegForm;

Вот ошибка которую выбивает:
./src/Components/RegForm/index.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
Может есть другой способ импортировать html?
  • Вопрос задан
  • 1119 просмотров
1 комментарий
Подписаться 1 Средний 1 комментарий
Пригласить эксперта
Ответы на вопрос 1
alex_bernadotte
@alex_bernadotte
Спасибо Яндекс Переводчику за этот ответ, я новичок в русском языке (я из Финляндии). У меня была та же проблема, что и у вас; вот как я ее решил.

Чтобы устранить первую ошибку, я преобразовал html в строку, обернув ее в ``, экспортировав ее как:

module.exports.HtmlString = `<!DOCTYPE html><html></html>`


и переименовав html-файл в js. Затем импортируйте файл в приложение React с помощью

import HtmlString from './html String.js '

и вставляем его в iframe с атрибутом 

<iframe srcDoc={HtmlString.HtmlString}  title="iFrame Title"/>
.

В HTML5 есть не только src для файла или URL, но и srcDoc для iframe, который принимает html в строковой форме.

Затем возникла проблема с получением моего импортного script.js в исходную html-строку, что я и сделал, обернув весь script.js файл в модуле `` точно так же, как html" 

module.exports.myJs = `оригинальный сценарий здесь`
".

Мне пришлось экранировать множество различных символов, таких как кавычки, специальные кавычки `` уже есть в файле javascript, и $, пока весь файл не превратился в непрерывную строку чтобы сделать это, я использовал обратную косую черту \ перед символами, которые в противном случае разорвали бы строку, "экранируя" их.

Надеюсь, этот ответ облегчит работу следующему человеку, который будет искать этот ответ.
с любовью из Финляндии
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Ведущий React Native разработчик
Студия 15
от 200 000 до 250 000 ₽
React Native Developer
Wanted. • Санкт-Петербург
До 300 000 ₽
React Native developer (+Node.js)
CTRL+ • Москва
от 250 000 до 320 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Записать рекламные видео креативы для мобильной игры
25 нояб. 2024, в 05:56
3000 руб./за проект
Аудит и поддержка проекта внедрению виртуальной архитектуры (АСУ ТП)
25 нояб. 2024, в 03:04
500000 руб./за проект
Сделать простой лендинг
25 нояб. 2024, в 02:45
2000 руб./за проект
Ещё заказы