Menu
I have a React component that I would like to render some static HTML into. This is a snippet of what my React component looks like:
class MyComponent extends Component {
render() {
return (
<div>
<iframe title="static_html" src="static_html_in_react_project.html"></iframe>
</div>
);
}
}
I have just a basic HTML file that looks like this:
<html>
<head>
<title>HTML</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
</head>
<body>
Do some stuff here
</body>
</html>
However, when I use the React component, it doesn't seem to be working, as it just re-renders the same page inside the iframe. I have placed the static HTML file in public as well as in the same directory as the calling component and it keeps rendering the parent component over and over again.
Anyone have any solution to rendering a static file in an iframe from the same React project?
370
I faced the same problem. It can be solved by putting the external html files in the public folder along with index.html. This solution works. If the html files are in src folder, it somehow doesn't pick them up and render them.
I am using webpack and babel in the project. If you want a sample project to try it out, try this https://github.com/grommet/grommet-vending Put external files in public folder and put a page in src with iframe in it.
When you are adding the address of file in iframe though, use
src="../App_File.html"
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
