Question

我有一个React组件，我想将一些静态HTML渲染到其中。这是我的React组件的摘要：

class MyComponent extends Component {
    render() {
        return (
            <div>
                <iframe title="static_html" src="static_html_in_react_project.html"></iframe>
            </div>
        );
    }
}

我只有一个基本的HTML文件，如下所示：

<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>

但是，当我使用React组件时，它似乎不起作用，因为它只是在iframe内部重新渲染了同一页面。我已经将静态HTML文件放置在public中，并且放置在与调用组件相同的目录中，并且不断重复渲染父组件。

任何人都可以通过同一React项目在iframe中呈现静态文件的任何解决方案？

Answer 1

我遇到了同样的问题。可以通过将外部html文件与index.html一起放在公共文件夹中来解决。此解决方案有效。如果html文件位于src文件夹中，则它不会以某种方式将其拾取并呈现。

我在项目中使用webpack和babel。如果您想尝试一个示例项目，请尝试此 https://github.com/grommet/grommet-vending 将外部文件放在公用文件夹中，然后将页面放入src中，其中包含iframe。

在iframe中添加文件地址时，请使用

src="../App_File.html"

Answer 2

有一个NPM软件包专门用于此目的。检出react-iframe。

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

使用iframe在React应用程序内渲染HTML

2 个答案: