Render HTML inside a React app using iframe

问题

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?

回答1:

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"

回答2:

There is an NPM package just for that. Check out react-iframe.

https://www.npmjs.com/package/react-iframe

来源：https://stackoverflow.com/questions/51603641/render-html-inside-a-react-app-using-iframe

标签

javascript

reactjs

iframe