如何将 HTML 文件导入 React 组件并将其用作组件？答案

【问题标题】：how to import HTML file into React component and use it as a component?如何将 HTML 文件导入 React 组件并将其用作组件？
【发布时间】：2018-06-11 08:00:05
【问题描述】：

我想将 HTML 文件导入 React 组件

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 文件并在但我得到了错误：

未捕获（承诺）错误：模块解析失败： C:\用户....\target.html Unexpected token (1:0) 你可能需要一个合适的加载器来处理此文件类型。

有什么想法吗？如何在 React 组件中加载 HTML 文件？如何添加适当的加载器来处理这种文件类型？有什么事吗？

我觉得这个解决方案最合乎逻辑：

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>

【问题讨论】：

看：stackoverflow.com/questions/33973757/…
为什么不使用peft.js 而不是.html 扩展名？有什么原因吗。。你也可以使用这个“const component(){ return(
hello World
)}”

标签： html reactjs

【解决方案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 ??
我很想知道这个问题的答案。我遇到了与帖子中提到的相同的错误。上面给出的答案“”并没有解决我的问题。
你试过<div dangerouslySetInnerHTML={{ __html: htmlText }} ></div>
你仍然得到 Module parse failed: Unexpected token (1:0) 你可能需要一个合适的加载器来处理这个文件类型，目前没有配置加载器来处理这个文件。见webpack.js.org/concepts#loaders > | |