iframe - 将 iframe 插入到 React 组件中

Question

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

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

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

在 React 中或使用 JSX 将其显示为 html 的最佳方式是什么？

Answer 1

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

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