gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 23:18:42 28 4
gpt4 key购买 nike

我有一个 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 中呈现静态文件吗?

最佳答案

我遇到了同样的问题。可以通过将外部 html 文件与 index.html 一起放在 public 文件夹中来解决。该解决方案有效。如果 html 文件在 src 文件夹中,它不会以某种方式提取并呈现它们。

我在项目中使用了webpack和babel。如果你想要一个示例项目来尝试一下,试试这个 https://github.com/grommet/grommet-vending将外部文件放在 public 文件夹中,并在 src 中放一个带有 iframe 的页面。

不过,当您在 iframe 中添加文件地址时,请使用

src="../App_File.html"

关于javascript - 使用 iframe 在 React 应用程序中呈现 HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51603641/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com