微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

将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>

原文地址:https://www.jb51.cc/html/231983.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐