反応成分にiframeを挿入する

Question

私は小さな問題があります。サービスからデータを要求した後、私は応答してiframeコードを取得しました。

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

私は単に{this.props.iframe}それレンダリング機能では、それは明らかにそれを文字列として表示されたときに、私のモーダルコンポーネントに小道具として、これを渡すと、それを表示しますがしたいと思います。

反応にhtmlとして、それを表示するための基本方法は何ですか？

Answer 1

また、あなたは質問に基づいて文字列（からすべての属性をコピーすることができ、あなたのようにインラインフレームを取得し、この

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>

のように、プロパティdangerouslySetInnerHTMLを使用することができますその

ようタグが含まれていて、新しいタグに渡し、サーバ）から文字列、

/** 
 
* 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 2

あなたは、あなたは下記のソリューション

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') 
); 

を使用することができますdangerouslySetInnerHTMLを使用したくない場合は、ここでライブデモは、それが私ということではありませんDemo