时间戳

首页 > 解决方案 > 如何将 HTML 文件导入 React 组件并将其用作组件？

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

问题描述

我想将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 文件并使用它，但我收到了错误：

Uncaught (in promise) 错误：模块解析失败：C:\Users....\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>

标签： htmlreactjs

解决方案

您可以导入或要求 html 文件并在 src 属性中使用它，

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

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

推荐阅读