Inserting the iframe into react component

后端未结

关注

 3  2024

借酒劲吻你 2020-11-30 20:08

I have a small problem. After requesting a data from a service I got an iframe code in response.

</script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-5408099190056760"
     data-ad-slot="7305827575"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>        </div>
      </div>
      
      <div class="fly-panel detail-box" id="flyReply">
        <fieldset class="layui-elem-field layui-field-title" style="text-align: center;">
          <legend>3条回答</legend>        </fieldset>

        <ul class="jieda" id="jieda">
                    <li data-id="111" class="jieda-daan">
            <a name="item-1111111111"></a>
            <div class="detail-about detail-about-reply">
                         <a class="fly-avatar" href="">
                <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000021.jpg" alt=" 暖寄归人 ">
              </a>
              <div class="fly-detail-user">
                <a href="" class="fly-link">
                  <cite> 暖寄归人</cite>
                                             
                </a>
                
                <span>(楼主)</span>
            
              </div>              <div class="detail-hits">
                <span>2020-11-30 21:05</span>
              </div>

            </div>
            <div class="detail-body jieda-body photos">
              <p>          
<p>You can use property dangerouslySetInnerHTML, like this</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>const Component = React.createClass({
  iframe: function () {
    return {
      __html: this.props.iframe
    }
  },

  render: function() {
    return (
      <div>
        <div dangerouslySetInnerHTML={ this.iframe() } />
      </div>
    );
  }
});

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

ReactDOM.render(
  ,
  document.getElementById('container')
);

also, you can copy all attributes from the string(based on the question, you get iframe as a string from a server) which contains </code> tag and pass it to new <code><iframe></code> tag, like that</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>/** * getAttrs * returns all attributes from TAG string * @return Object */ const getAttrs = (iframeTag) => { var doc = document.createElement('div'); doc.innerHTML = iframeTag; const iframe = doc.getElementsByTagName('iframe')[0]; return [].slice .call(iframe.attributes) .reduce((attrs, element) => { attrs[element.name] = element.value; return attrs; }, {}); } const Component = React.createClass({ render: function() { return ( <div> <iframe {...getAttrs(this.props.iframe) } /> </div> ); } }); const iframe = '<iframe src="https://www.example.com/show?data..." width="540" height="450">'; ReactDOM.render( , document.getElementById('container') );