将 iframe 插入 React 组件

Question

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

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

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

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

Answer 1

如果您不想使用危险的SetInnerHTML 那么您可以使用下面提到的解决方案

var Iframe = React.createClass({     
  render: function() {
    return(         
      <div>          
        <iframe src={this.props.src} height={this.props.height} width={this.props.width}/>         
      </div>
    )
  }
});

ReactDOM.render(
  <Iframe src="http://plnkr.co/" height="500" width="500"/>,
  document.getElementById('example')
);

这里有现场演示Demo

Answer 2

你可以使用属性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>

Answer 3

使用 ES6 你现在可以这样做

要加载的示例 Codepen URl

const iframe = '<iframe height="265" style="width: 100%;" scrolling="no" title="fx." src="//codepen.io/ycw/embed/JqwbQw/?height=265&theme-id=0&default-tab=js,result" frameborder="no" allowtransparency="true" allowfullscreen="true">See the Pen <a href="https://codepen.io/ycw/pen/JqwbQw/">fx.</a> by ycw(<a href="https://codepen.io/ycw">@ycw</a>) on <a href="https://codepen.io">CodePen</a>.</iframe>'; 

加载 Iframe 的功能组件

function Iframe(props) {
  return (<div dangerouslySetInnerHTML={ {__html:  props.iframe?props.iframe:""}} />);
}

用法：

import React from "react";
import ReactDOM from "react-dom";
function App() {
  return (
    <div className="App">
      <h1>Iframe Demo</h1>
      <Iframe iframe={iframe} />,
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在 CodeSandbox 上编辑：

https://codesandbox.io/s/react-iframe-demo-g3vst