Menu
I want to import an HTML file into a React component
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;
so in my case, I need to import a local HTML file and use it in but I'm getting the error:
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.
any ideas? How to load an HTML file inside of a React Component? How to add an appropriate loader to handle this file type? Anything?
I find this solution as most logical:
var __html = require('./template.html');
var template = { __html: __html };
React.module.exports = React.createClass({
render: function() {
return(
<div dangerouslySetInnerHTML={template} />
);
}
});
but I can not apply it because I'm getting an error:
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>
882
In the file App.js automatically generated by the create-react-app command: Then, in a file called ImportElement.js in the same directory: We can see many similarities when importing the functional component ImportComponent. The import and export keywords are used in the exact same way.
Here's how you can do it yourself with a simple recursive function. html-attribute-to-react to convert the HTML attributes to React props Then you can import this module into your component files, and use it like this:
This utility was designed to free React developers from a boring work of translating HTML into React components. Imagine you just got a pile of HTML from your designers. The first thing you will do is break HTML into React components.
The value of the attribute is the name of the React component. The structure of HTML is preserved by importing child components and replacing appropriate pieces of HTML with them.
You can import or require the html file and use it in the src attribute,
var perf =require('./template.html');
class Index extends React.Component {
render(){
return (
<iframe src={perf }></iframe> /* like this */
);
}
}
export default Index;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
