使用iframe在React应用程序内渲染HTML [英] Render HTML inside a React app using iframe
问题描述
我有一个React组件，我想将一些静态HTML渲染到其中.这是我的React组件的摘要:
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>
);
}
}
我只有一个基本的HTML文件，如下所示:
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>
但是，当我使用React组件时，它似乎不起作用，因为它只是在iframe中重新渲染了同一页面.我已将静态HTML文件放置在public以及与调用组件相同的目录中，并且不断重复渲染父组件.
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.
任何人有任何解决方案可以在同一React项目的iframe中呈现静态文件吗?
Anyone have any solution to rendering a static file in an iframe from the same React project?
推荐答案
我遇到了同样的问题.可以通过将外部html文件和index.html放在公共文件夹中来解决.此解决方案有效.如果html文件位于src文件夹中，它将以某种方式不会将它们拾取并呈现.
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.
我在项目中使用webpack和babel. 如果您想尝试一个示例项目，请尝试此 https://github.com/grommet/grommet-vending 将外部文件放在公用文件夹中，然后将页面放入src中，其中包含iframe.
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.
在iframe中添加文件地址时，请使用
When you are adding the address of file in iframe though, use
src="../App_File.html"
这篇关于使用iframe在React应用程序内渲染HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
