gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 14:07:41 32 4
gpt4 key购买 nike

我想将 HTML 文件导入 React 组件

enter image description here

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) Error: Module parse failed: C:\Users....\target.html Unexpected token (1:0) You may need an appropriate loader to handle this file type.

有什么想法吗?如何在 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 文件并在 src 属性中使用它,

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

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

关于html - 如何将 HTML 文件导入到 React 组件中并将其用作组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50792942/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com