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

Question

如何将 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>

Run Code Online (Sandbox Code Playgroud)

索引.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;

Run Code Online (Sandbox Code Playgroud)

所以就我而言，我需要导入一个本地 HTML 文件并在其中使用它，但出现错误：

Uncaught (in promise) Error: Module parse failed: 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} />
    );
  }
});

Run Code Online (Sandbox Code Playgroud)

但我无法应用它，因为出现错误：

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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Man*_*ddy 12

为此花了2个小时。

下面有两种方法可以实现相同的效果：

方法 1 - iframe（页面的一部分）转到该 html 文件 ( chap3.htm)
方法2-将andfetch的内容chap3.htm设置为state，state加上dangerouslySetInnerHTML

笔记

Html 文件位于public目录 ( myapp\public\chap3.htm) 中。
也可以从当前目录工作，但看起来不像从当前目录加载静态资源/html 的常用方法。

方法一

import React from'react';
import'./App.css';

function App() {
  return(
    <div className="App">
      <iframe src="chap3.htm"></iframe>
    </div>
  );
}

export default App;

Run Code Online (Sandbox Code Playgroud)

方法二

import React, { useEffect, useState }from'react';
import'./App.css';

function App() {
  let[htmlFileString, setHtmlFileString] = useState();

  async function fetchHtml() {
    setHtmlFileString(await (await fetch(`chap3.htm`)).text());
  }
  useEffect(() => {
    fetchHtml();
  }, []);

  return(
    <div className="App">
      <div dangerouslySetInnerHTML={{ __html: htmlFileString }}></div>
    </div>
  );
}

export default App;

Run Code Online (Sandbox Code Playgroud)

Answer 2

Roh*_*ali 8

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

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

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

Run Code Online (Sandbox Code Playgroud)

我很想知道这个问题的答案。我遇到了与帖子中提到的相同的错误。上面给出的答案 "<iframe src={perf }></iframe> " 没有解决我的问题。 (2认同)
您仍然收到 Module parse failed: Unexpected token (1:0) 您可能需要适当的加载程序来处理此文件类型，当前没有配置加载程序来处理此文件。请参阅 https://webpack.js.org/concepts#loaders > <!DOCTYPE html> | <html lang="zh"> | <头> (2认同)

归档时间：	7 年，6 月前
查看次数：	19683 次
最近记录：	7 年，6 月前