将iframe插入react组件

Question

我有一个小问题。从服务请求数据后，我得到了一个iframe代码作为响应。

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

我想将其作为道具传递给我的模式组件并显示它，但是当我{this.props.iframe}在render函数中简单地将其显示为字符串时。

在react中将其显示为html的基本方法是什么？

Answer 1

您可以dangerouslySetInnerHTML像这样使用property

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"></iframe>';



ReactDOM.render(

  <Component iframe={iframe} />,

  document.getElementById('container')

);


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"></div>

同样，您可以从 字符串中 复制所有属性（ 根据问题，您从服务器获取iframe作为字符串
），其中包含<iframe>标签，并将其传递给新<iframe>标签，例如

/**

 * 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"></iframe>';



ReactDOM.render(

  <Component iframe={iframe} />,

  document.getElementById('container')

);


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="container"><div>