文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将HTML文件导入React组件并将其用作组件？

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

Stack Overflow用户

提问于 2018-06-11 08:00:05

回答 2查看 40.4K关注 0票数 14

我想将一个文件导入到(一个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:\Users....\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>

html

reactjs

回答 2

Stack Overflow用户

回答已采纳

发布于 2018-06-11 09:48:52

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

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

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

票数 12

Stack Overflow用户

发布于 2022-09-09 03:49:13

花了两个小时在这上面。

有两种方法，可以在下面这样做：

Method1 - iframe (页面的一部分)转到html文件(chap3.htm)。
Method2 - fetch chap3.htm的内容，并设置为chap3.htm，状态与dangerouslySetInnerHTML一起添加。

注意事项

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

方法1

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

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

export default App;

方法2

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;

票数 5

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50792942

复制

相似问题

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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