如何在 ReactJs 响应式 Web 应用程序中添加网站？答案

【问题标题】：How to add a Website in a ReactJs responsive web app?如何在 ReactJs 响应式 Web 应用程序中添加网站？
【发布时间】：2022-01-13 01:26:22
【问题描述】：

我需要帮助解决这个问题。我的目标是将网站放在 ReactJs 网络应用程序中。我尝试使用 ReactJs 的iframe，它不起作用。

有没有办法在 ReactJs 网络应用程序中使用 React Native WebView 组件？或者 ReactJs

中是否有 Webview 组件

我确实希望最终用户跳转到另一个选项卡以使用该网站。我希望他们继续留在 ReactJs 网络应用程序中并使用该网站。

我放的网站是一个 .Net 网站，我正在做一个 ReactJs 项目，而不是一个 React Native 项目

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： reactjs webview

【解决方案1】：

只需使用 iframe 就可以作为这个例子（来源如下）因为你给这个 iframe 语言的 url 是否可以在 http(s) 中提供并不重要

import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
  render() {
    return <iframe src="https://<website>/" />;
  }
}
ReactDOM.render(<App />, document.getElementById("container"));

如源代码中所说，src url 应该可以嵌入到 iframe 中，否则您可以使用反向代理来提供此 url 并更改标题

来源： https://blog.bitsrc.io/best-practices-in-using-iframes-with-react-6193feaa1e08

【讨论】：

您好，非常感谢您的回答。我试过这个 iframe 方法，我也跟着这个来源。我遇到了源网站的 x-frame 设置为“sameorgin”的问题，我认为它不可嵌入。如果使用此 iframe 方法，如何解决此问题？还有没有不包含iframe的方法？
如源代码中所说，src url 应该可以嵌入到 iframe 中，如果不是，您可以使用反向代理来提供此 url 并更改标头 nginx，例如 stackoverflow.com/questions/45986631/…