Javascript 使用iframe在React应用程序中呈现HTML_Javascript_Reactjs_Iframe

Javascript 使用iframe在React应用程序中呈现HTML

javascript reactjs iframe

Javascript 使用iframe在React应用程序中呈现HTML,javascript,reactjs,iframe,Javascript,Reactjs,Iframe,我有一个React组件，我想将一些静态HTML呈现到其中。这是我的React组件的一个片段： class MyComponent extends Component { render() { return ( <div> <iframe title="static_html" src="static_html_in_react_project.html"></iframe>

我有一个React组件，我想将一些静态HTML呈现到其中。这是我的React组件的一个片段：

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

类MyComponent扩展组件{
render（）{
返回(
);
}
}

我有一个基本的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>


HTML
在这里做些事情

但是，当我使用React组件时，它似乎不起作用，因为它只是在

iframe

中重新呈现相同的页面。我已经将静态HTML文件放置在

public

中，以及与调用组件相同的目录中，它不断地一次又一次地呈现父组件

有没有人有办法在同一个项目的

iframe

中呈现静态文件

有一个NPM包就是为了这个。查看

react iframe

我也面临同样的问题。可以通过将外部html文件与

index.html

一起放入公用文件夹来解决此问题。这个解决方案有效。如果html文件在src文件夹中，它不知何故不会将它们提取并呈现出来

我在项目中使用webpack和babel。如果您想要一个示例项目来尝试它，请尝试以下方法将外部文件放在公用文件夹中，并在src中放置一个带有iframe的页面

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

src="../App_File.html"

这实际上是在做与上面代码相同的事情。它不是加载位于项目中的静态html文件，而是一次又一次地呈现父容器。只是想发回消息，我正在探索什么在这里有效，什么在这里无效。。。这是我目前正在读的关于react和iframes的文章：这在生产中似乎是无效的，你知道如何让它在生产中工作吗？