在 React 应用程序中显示 iframe

1. 在 React 中使用 dangerouslySetInnerHTML 属性显示 iframe
2. 在 React 中为 iframe 创建自定义组件
3. 在 React 应用程序中放置 iframe 的效果

每个现代应用程序都需要一个 HTML 结构。React 开发人员使用 JSX 轻松构建应用程序的标记。JSX 的语法看起来很像 HTML，因此即使你是 React 的新手，也很容易编写。

在 React 中使用 dangerouslySetInnerHTML 属性显示 iframe

在某些情况下，你需要将 HTML 代码注入现有标记。在本文中，我们将讨论在你的应用程序中插入 iframe 标签的情况。

从服务器获取预结构化 HTML 代码作为响应的情况并不少见。大多数情况下，它被格式化为字符串。

将 iframe 插入 React 应用程序中最困难的部分是解析字符串值以获取其属性，例如源、宽度和高度。如果从服务器接收到的数据具有更多的结构并指定 iframe 的宽度、高度和来源，这会更容易一些。例如，它可以是具有与这些值对应的属性的对象。

将 iframe 插入 React 应用程序的最简单方法是使用 dangerouslySetInnerHTML 属性。该属性的值应该是一个带有 __html 键和字符串 HTML 值的对象。

让我们看一个例子：

export default function App(props) {
  const {
    iframeSource = '<iframe src="https://codesandbox.io/"></iframe>'
  } = props;
  return <div className="App" dangerouslySetInnerHTML={{__html: iframeSource}}></div>;
}

这是一个相当简单的演示。我们有一个带有默认值的 iframeSource 属性，一个字符串形状的 iframe 标签。

我们只返回一个带有 dangerouslySetInnerHTML 属性的 div 元素，该属性设置为带有 __html 键和 HTML 字符串的对象。

你可以在 codesandbox 上测试示例代码。

在 React 中为 iframe 创建自定义组件

根据源代码的结构，创建一个不使用 dangerouslySetInnerHTML 的自定义组件可能会更好。如果诸如 source、width 和 height 之类的 iframe 属性可用，你可以将它们作为 props 传递并完全避免使用 dangerouslySetInnerHTML。

让我们看一个例子：

export default function Component(props){
   const {source, height, width} = this.props
   return (
   	<div>          
      <iframe src={source} height={height} width={width}/>         
    </div>
   ) 
}   

这是一个更简单的解决方案。你可以在应用程序的任何地方使用这个组件，只要你有必要的值作为 props 传递。

有时你必须解析字符串以提取 iframe 标签的高度、宽度和来源等值。出于安全原因，最好避免使用 dangerouslySetInnerHTML 属性，如下所述。

在 React 应用程序中放置 iframe 的效果

一般来说，在你的 React 应用程序中放置 iframe 被认为是一种不安全的做法。问题是你无法控制源页面，它可以显示任何内容。

iframe 中的页面可能需要很长时间才能加载，这也会影响整个页面的性能。

除此之外，dangerouslySetInnerHTML 属性会将你的访问者暴露给 XSS 攻击。还有其他安全风险和潜在泄漏。

根据经验，如果你的 React 应用程序必须包含 iframe 标签，请确保你信任源页面不会尝试任何恶意行为。