将 iframe 插入 React 组件 [英] Inserting the iframe into react component

查看：9 发布时间：2021/12/21 22:45:24 iframe reactjs
本文介绍了将 iframe 插入 React 组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述

我有一个小问题.从服务请求数据后，我得到了一个 iframe 代码作为响应.
</pre><p>我想将它作为道具传递给我的模态组件并显示它，但是当我在渲染函数中简单地 <code>{this.props.iframe}</code> 它时，它显然将它显示为字符串.</p><p><strong>在 react 或使用 JSX 中将其显示为 html 的最佳方式是什么?</strong></p><div class="h2_lin"> 解决方案 </div><p>您可以使用属性 <a href="https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml" rel="nofollow noreferrer"><code>dangerouslySetInnerHTML</code></a>，像这样</p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true"></p><div class="snippet-code"></p><pre class="snippet-code-js lang-js Prettyprint-override"><code>const Component = React.createClass({iframe: 函数 () {返回 {__html: this.props.iframe}},渲染:函数(){返回 (&lt;div&gt;&lt;div risklySetInnerHTML={ this.iframe() }/&gt;</div><p>);}});const iframe = '&lt;iframe src="https://www.example.com/show?data..." width="540" height="450">&lt;/iframe&gt;';ReactDOM.render(&lt;组件 iframe={iframe}/&gt;,document.getElementById('容器'));</code></pre><p></p><pre class="snippet-code-html lang-html Prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;&lt;div id="container"&gt;&lt;/div&gt;</code></pre><p></div><p></div><p></p><p>此外，您可以从包含 <code>&lt;iframe></code> 标签并将其传递给新的 <code><iframe></code> 标签，就像那样</p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true"></p><div class="snippet-code"></p><pre class="snippet-code-js lang-js Prettyprint-override"><code>/*** 获取属性* 从 TAG 字符串返回所有属性* @return 对象*/const getAttrs = (iframeTag) =>{var doc = document.createElement('div');doc.innerHTML = iframeTag;const iframe = doc.getElementsByTagName('iframe')[0];返回 [].slice.call(iframe.attributes).reduce((attrs, element) => {attrs[element.name] = element.value;返回属性；}, {});}const 组件 = React.createClass({渲染:函数(){返回 (&lt;div&gt;&lt;iframe {...getAttrs(this.props.iframe) }/&gt;</div><p>);}});const iframe = '&lt;iframe src="https://www.example.com/show?data..." width="540" height="450">&lt;/iframe&gt;';ReactDOM.render(&lt;组件 iframe={iframe}/&gt;,document.getElementById('容器'));</code></pre><p></p><pre class="snippet-code-html lang-html Prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;&lt;div id="容器"&gt;&lt;div&gt;</code></pre><p></div><p></div><p></p><p>I have a small problem. After requesting a data from a service I got an iframe code in response.</p><pre><code>&lt;iframe src=&quot;https://www.example.com/show?data...&quot; width=&quot;540&quot; height=&quot;450&quot;&gt;&lt;/iframe&gt;
</code></pre><p>I would like to pass this in as a props to my modal component and display it but when I simply <code>{this.props.iframe}</code> it in the render function it is obviously displaying it as a string.</p>
<p><strong>What is the best way to display it as html in react or using JSX?</strong></p><div class="h2_lin"> 解决方案 </div><p>You can use property <a href="https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml" rel="nofollow noreferrer"><code>dangerouslySetInnerHTML</code></a>, like this</p>
<p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
</p><div class="snippet-code">
</p><pre class="snippet-code-js lang-js prettyprint-override"><code>const Component = React.createClass({
  iframe: function () {
    return {
      __html: this.props.iframe
    }
  },

  render: function() {
    return (
      &lt;div&gt;
        &lt;div dangerouslySetInnerHTML={ this.iframe() } /&gt;
      &lt;/div&gt;
    );
  }
});

const iframe = '&lt;iframe src="https://www.example.com/show?data..." width="540" height="450"&gt;&lt;/iframe&gt;'; 

ReactDOM.render(
  &lt;Component iframe={iframe} /&gt;,
  document.getElementById('container')
);</code></pre><p>
</p><pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
&lt;div id="container"&gt;&lt;/div&gt;</code></pre><p>
</div><p>
</div><p>
</p>
<p>also, you can copy all attributes from the <strong>string</strong>(<em>based on the question, you get iframe as a string from a server</em>) which contains <code>&lt;iframe&gt;</code> tag and pass it to new <code>&lt;iframe&gt;</code> tag, like that</p>
<p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
</p><div class="snippet-code">
</p><pre class="snippet-code-js lang-js prettyprint-override"><code>/**
 * getAttrs
 * returns all attributes from TAG string
 * @return Object
 */
const getAttrs = (iframeTag) =&gt; {
  var doc = document.createElement('div');
  doc.innerHTML = iframeTag;

  const iframe = doc.getElementsByTagName('iframe')[0];
  return [].slice
    .call(iframe.attributes)
    .reduce((attrs, element) =&gt; {
      attrs[element.name] = element.value;
      return attrs;
    }, {});
}

const Component = React.createClass({
  render: function() {
    return (
      &lt;div&gt;
        &lt;iframe {...getAttrs(this.props.iframe) } /&gt;
      &lt;/div&gt;
    );
  }
});

const iframe = '&lt;iframe src="https://www.example.com/show?data..." width="540" height="450"&gt;&lt;/iframe&gt;'; 

ReactDOM.render(
  &lt;Component iframe={iframe} /&gt;,
  document.getElementById('container')
);</code></pre><p>
</p><pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
&lt;div id="container"&gt;&lt;div&gt;</code></pre><p>
</div><p>
</div><p>
</p>

                        <p>这篇关于将 iframe 插入 React 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p>
                        
                    </div>
                    <div class="arc-body-main-more">
                        <span onclick="unlockarc('2700910');">查看全文</span>
                    </div>
                </div>
				<div>
                            
                        </div>
                <div class="wwads-cn wwads-horizontal" data-id="166" style="max-width:100%;border: 4px solid #666;"></div>
            </div>
        </article>
        <div id="arc-ad-2" class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
        <div class="widget bgwhite radius-1 mb-1 shadow widget-rel">
            <h5>相关文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="将iframe插入反应组件" href="/892290.html">
                            将iframe插入反应组件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="如何设置React组件的iframe内容" href="/2126761.html">
                            如何设置React组件的iframe内容;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将内容插入iFrame" href="/860974.html">
                            将内容插入iFrame;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将内容插入 iFrame" href="/2700852.html">
                            将内容插入 iFrame;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将 HTML 插入 iframe" href="/2789949.html">
                            将 HTML 插入 iframe;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将HTML插入到iframe中" href="/864788.html">
                            将HTML插入到iframe中;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将iframe添加到JSF组件" href="/2154028.html">
                            将iframe添加到JSF组件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="react.js - React如何动态的插入一个组件？" href="/729449.html">
                            react.js - React如何动态的插入一个组件？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="动态将组件插入html" href="/1896303.html">
                            动态将组件插入html;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="动态将样式表插入IFRAME" href="/1487889.html">
                            动态将样式表插入IFRAME;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将className传递给React组件" href="/1599114.html">
                            将className传递给React组件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Javascript插入IFRAME" href="/892988.html">
                            Javascript插入IFRAME;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将脚本插入iFrame的标题，而不清除iFrame的正文" href="/652052.html">
                            将脚本插入iFrame的标题，而不清除iFrame的正文;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React react-router-dom 将 props 传递给组件" href="/2871394.html">
                            React react-router-dom 将 props 传递给组件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React react-router-dom将props传递给组件" href="/1004756.html">
                            React react-router-dom将props传递给组件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将 React 函数组件转换为类组件问题" href="/2762541.html">
                            将 React 函数组件转换为类组件问题;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将React函数组件转换为类组件问题" href="/1057827.html">
                            将React函数组件转换为类组件问题;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在插入位置（IE）将文本插入可编辑的IFRAME" href="/892210.html">
                            在插入位置（IE）将文本插入可编辑的IFRAME;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React:将道具传递给功能组件" href="/2849351.html">
                            React:将道具传递给功能组件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React:将功能传递给子组件" href="/2283426.html">
                            React:将功能传递给子组件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将 SVG 文件解析为 React 组件" href="/2423729.html">
                            将 SVG 文件解析为 React 组件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将React组件分割成多个文件" href="/870916.html">
                            将React组件分割成多个文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在每个“X&quot;React 组件之后插入一个元素" href="/2449702.html">
                            在每个“X&quot;React 组件之后插入一个元素;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="React - 如何将`ref`从子组件传递到父组件?" href="/2364846.html">
                            React - 如何将`ref`从子组件传递到父组件?;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将React组件传递给另一个组件?" href="/1830980.html">
                            将React组件传递给另一个组件?;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="mb-1">
            <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5038752844014834"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-5038752844014834"
     data-ad-slot="3921941283"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

        </div>
    </div>
    <div class="side">
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>其他开发最新文章</h5>
            <ul>
                    <li>
                        <a target="_blank" title="拒绝显示一个框架，因为它将&#39;X-Frame-Options&#39;设置为&#39;sameorigin&#39;" href="/893060.html">
                            拒绝显示一个框架，因为它将&#39;X-Frame-Options&#39;设置为&#39;sameorigin&#39;;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？" href="/303988.html">
                            什么是＆QUOT; AW＆QUOT;在部分标志属性是什么意思？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="在运行npm install命令时获取&#39;npm WARN弃用&#39;警告" href="/840917.html">
                            在运行npm install命令时获取&#39;npm WARN弃用&#39;警告;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="cmake无法找到openssl" href="/516280.html">
                            cmake无法找到openssl;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件" href="/850628.html">
                            从Spark的scala中的* .tar.gz压缩文件中读取HDF5文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="Twitter :: Error :: Forbidden  - 无法验证您的凭据" href="/630061.html">
                            Twitter :: Error :: Forbidden  - 无法验证您的凭据;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="我什么时候需要一个fb：app_id或者fb：admins？" href="/747981.html">
                            我什么时候需要一个fb：app_id或者fb：admins？;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="将.db文件导入R" href="/902960.html">
                            将.db文件导入R;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件" href="/744854.html">
                            npm通知创建一个lockfile作为package-lock.json。你应该提交这个文件;
                        </a>
                    </li>
                    <li>
                        <a target="_blank" title="拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src&#39;self&#39;”" href="/819167.html">
                            拒绝执行内联脚本，因为它违反了以下内容安全策略指令：“script-src&#39;self&#39;”;
                        </a>
                    </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门教程
            </h5>
            <ul>
                <li>
                    <a target="_blank" title="Java教程" href="/OnLineTutorial/java/index.html">
                        Java教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache ANT 教程" href="/OnLineTutorial/ant/index.html">
                        Apache ANT 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Kali Linux教程" href="/OnLineTutorial/kali_linux/index.html">
                        Kali Linux教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaScript教程" href="/OnLineTutorial/javascript/index.html">
                        JavaScript教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="JavaFx教程" href="/OnLineTutorial/javafx/index.html">
                        JavaFx教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MFC 教程" href="/OnLineTutorial/mfc/index.html">
                        MFC 教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Apache HTTP客户端教程" href="/OnLineTutorial/apache_httpclient/index.html">
                        Apache HTTP客户端教程
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Microsoft Visio 教程" href="/OnLineTutorial/microsoft_visio/index.html">
                        Microsoft Visio 教程
                    </a>
                </li>
            </ul>
        </div>
        <div class="widget widget-side bgwhite mb-1 shadow">
            <h5>
                热门工具
            </h5>
            <ul>
                
                <li>
                    <a target="_blank" title="Java 在线工具" href="/Onlinetools/details/4">
                        Java 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C(GCC) 在线工具" href="/Onlinetools/details/6">
                        C(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="PHP 在线工具" href="/Onlinetools/details/8">
                        PHP 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C# 在线工具" href="/Onlinetools/details/1">
                        C# 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Python 在线工具" href="/Onlinetools/details/5">
                        Python 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="MySQL 在线工具" href="/Onlinetools/Dbdetails/33">
                        MySQL 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="VB.NET 在线工具" href="/Onlinetools/details/2">
                        VB.NET 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Lua 在线工具" href="/Onlinetools/details/14">
                        Lua 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Oracle 在线工具" href="/Onlinetools/Dbdetails/35">
                        Oracle 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="C++(GCC) 在线工具" href="/Onlinetools/details/7">
                        C++(GCC) 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Go 在线工具" href="/Onlinetools/details/20">
                        Go 在线工具
                    </a>
                </li>
                <li>
                    <a target="_blank" title="Fortran 在线工具" href="/Onlinetools/details/45">
                        Fortran 在线工具
                    </a>
                </li>
            </ul>
        </div>
        
    </div>
</div>
<script type="text/javascript">var eskeys = '将,iframe,插入,react,组件'; var cat = 'cc';';//other-dev</script>
    </div>
<div id="pop" onclick="pophide();">
    <div id="pop_body" onclick="event.stopPropagation();">
        <h6 class="flex flex101">
            登录
            <span onclick="pophide();">关闭</span>
        </h6>
        <div class="pd-1">
            <div class="wxtip center">
                <span>扫码关注<em>1秒</em>登录</span>
            </div>
            <div class="center">
                <img id="qr" src="https://huajiakeji.com/Content/Images/qrydx.jpg" alt="" style="width:150px;height:150px;" />
            </div>
            <div style="margin-top:10px;display:flex;justify-content: center;">
                <input type="text" placeholder="输入验证码" id="txtcode" autocomplete="off" />
                <input id="btngo" type="button" onclick="chk()" value="GO" />
            </div>
            <div class="center" style="margin: 4px; font-size: .8rem; color: #f60;">
                发送“验证码”获取
                <em style="padding: 0 .5rem;">|</em>
                <span style="color: #01a05c;">15天全站免登陆</span>
            </div>
            <div id="chkinfo" class="tip"></div>
        </div>
    </div>
</div>    <script type="text/javascript" src="https://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/highlight.min.js"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/base.js?v=0.22"></script>
<script type="text/javascript" src="https://img01.yuandaxia.cn/Scripts/tui.js?v=0.11"></script>
<footer class="footer">
    <div class="container">
		<div class="flink mb-1">
			友情链接：
            <a href="https://www.it1352.com/" target="_blank">IT屋</a>
            <a href="https://huajiakeji.com/" target="_blank">Chrome插件</a>
            <a href="https://www.cnplugins.com/" target="_blank">谷歌浏览器插件</a>
        </div>
        <section class="copyright-section">
            <a href="https://www.it1352.com" title="IT屋-程序员软件开发技术分享社区">IT屋</a>
            ©2016-2022 <a href="http://www.beian.miit.gov.cn/" target="_blank">琼ICP备2021000895号-1</a>
            <a href="/sitemap.html" target="_blank" title="站点地图">站点地图</a>
            <a href="/Home/Tags" target="_blank" title="站点标签">站点标签</a>
            <a target="_blank" alt="sitemap" href="/sitemap.xml">SiteMap</a>
            <a href="/1155981.html" title="IT屋-免责申明"><免责申明></a>
            本站内容来源互联网,如果侵犯您的权益请联系我们删除.
        </section>
        
<!--统计代码-->
<script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?0c3a090f7b3c4ad458ac1296cb5cc779";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
<script type="text/javascript">
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        }
        else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>
    </div>
</footer>
</body>
</html>