將iframe插入反應組件

我有一個小問題。在請求服務中的數據之後，我得到了一個iframe代碼作爲迴應。將iframe插入反應組件

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

我想作爲一個道具它傳遞給我的模態分量並顯示，但是當我只是{this.props.iframe}它在渲染功能很明顯是顯示它作爲一個字符串。

什麼是反應顯示它爲html的基本方法？

來源

2015-11-25 Kocur4d

您可以使用屬性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作爲來自服務器的字符串），其中包含標記並將其傳遞給新的標記，就像那樣

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

來源

2015-11-25 10:26:56

如果你不想使用dangerouslySetInnerHTML那麼你可以使用下面提及的解決方案

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

來源

2015-11-25 11:19:00

它不是我不想使用它我不能100％確定它會出錯。你的解決方案是乾淨的我只是需要我解析字符串來提取值。 – Kocur4d

根據我的理解在React使用危險SetInnerHTML是不是一個好的做法和雅如果你認爲我的解決方案將是一個答案，然後接受它 –

感謝您的代碼..這比使用dangersoulySetHtml – John

將iframe插入反應組件

回答

相關問題