我有一个小问题。从服务请求数据后，我得到了一个 iframe 代码作为响应。
<iframe src="https://www.example.com/show?data..." width="540" height="450"></iframe>
我想将它作为props传递给我的模态组件并显示它，但是当我{this.props.iframe}在渲染函数中简单地将它显示为字符串时。
在react或使用 JSX 中将其显示为 html 的最佳方式是什么？
将 iframe 插入 React 组件
IT技术
iframe
reactjs
2021-03-26 05:53:38
3个回答
如果您不想使用危险的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
你可以使用 property 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>使用 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 上编辑：