将iframe插入反应组件

概述我有一个小问题.在从服务请求数据后,我得到了一个iframe代码作为响应. <iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe> 我想把它作为道具传递到我的模态组件并显示它但是当我只是{this.props.iframe}它在渲染函数中它显然是将它显示为一个字符串. 什么是将其显示 我有一个小问题.在从服务请求数据后,我得到了一个iframe代码作为响应.

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

我想把它作为道具传递到我的模态组件并显示它但是当我只是{this.props.iframe}它在渲染函数中它显然是将它显示为一个字符串.

什么是将其显示为HTML的基本方式？

解决方法 您可以使用属性 dangerouslySetInnerHTML,就像这样

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>

总结

以上是内存溢出为你收集整理的将iframe插入反应组件全部内容，希望文章能够帮你解决将iframe插入反应组件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。