Как импортировать HTML-файл в компонент React и использовать его как компонент?
Я хочу импортировать файл HTMLв компонент Реагировать
peft.html
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
index.js
import perf from perf.html
class Index extends React.Component {
render(){
return (
<iframe src = "perf"></iframe> /* like this */
<iframe src = "./perf"></iframe> /* or like this */
/* or like any possible way */
);
}
}
export default Index;
поэтому в моем случае мне нужно импортировать локальный HTML-файл и использовать его в но я получаю сообщение об ошибке:
Uncaught (in promise) Error: Module parse failed: C:\Users....\target.html Unexpected token (1:0) You may need an appropriate loader to handle this file type.
Любые идеи? Как загрузить HTML-файл в компонент React? Как добавить соответствующий загрузчик для работы с этим типом файлов? Что-нибудь?
Я считаю это решение наиболее логичным:
var __html = require('./template.html');
var template = { __html: __html };
React.module.exports = React.createClass({
render: function() {
return(
<div dangerouslySetInnerHTML = {template} />
);
}
});
но я не могу его применить, потому что получаю сообщение об ошибке:
Uncaught (in promise) Error: Module parse failed: C:\Users\....\target.html Unexpected token (1:0) You may need an appropriate loader to handle this file type.
| <!DOCTYPE html>
| <html xmlns = "w3.org/1999/xhtml">;
| <head><title>
Почему бы не сделать его peft.js вместо расширения .html? Есть ли смысл?. Вы также можете использовать этот "const component () {return (<div> hello World </div>)}"
Ответы 1
Вы можете импортировать или потребовать html-файл и использовать его в атрибуте src,
var perf =require('./template.html');
class Index extends React.Component {
render(){
return (
<iframe src = {perf }></iframe> /* like this */
);
}
}
export default Index;
Не могли бы вы принять ответ для сообщества по переполнению стека, если он сработал для вас.
А где вы используете IndexedDB ??
Извините. моя ошибка.
Мне любопытно узнать ответ на эту проблему. Я столкнулся с той же ошибкой, что и в сообщении. Приведенный выше ответ «<iframe src = {perf}> </iframe>» не решил мою проблему.
Вы пробовали <div dangerouslySetInnerHTML = {{ __html: htmlText }} ></div>
Вы по-прежнему получаете Ошибка синтаксического анализа модуля: неожиданный токен (1: 0). Для обработки этого типа файла может потребоваться соответствующий загрузчик, в настоящее время загрузчики не настроены для обработки этого файла. См. webpack.js.org/concepts#loaders> <! DOCTYPE html> | <html lang = "ru"> | <head>
Посмотрите: stackoverflow.com/questions/33973757/…