You can use property dangerouslySetInnerHTML
, like this
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>
Run code snippetExpand snippet
also, you can copy all attributes from the string(based on the question, you get iframe as a string from a server) which contains <iframe>
tag and pass it to new <iframe>
tag, like that
/** * 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>