Question

我想将 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上意外的令牌（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>

Answer 1

您可以导入或要求html文件并在src属性

中使用它

var perf =require('./template.html');

class Index extends React.Component {
   render(){
      return (
         <iframe src={perf }></iframe>   /* like this */
      );
   }
}
export default Index;

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

1 个答案: