Chèn khung nội tuyến vào thành phần phản ứng

Question

Tôi gặp sự cố nhỏ. Sau khi yêu cầu dữ liệu từ một dịch vụ, tôi nhận được mã iframe để phản hồi.

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

Tôi muốn chuyển thông tin này như là một đạo cụ để phần modal của tôi và hiển thị nó nhưng khi tôi chỉ đơn giản {this.props.iframe} nó trong render chức năng nó được rõ ràng hiển thị nó như là một chuỗi.

Cách cơ bản để hiển thị dưới dạng html trong phản ứng là gì?

Answer 1

Bạn có thể sử dụng tài sản dangerouslySetInnerHTML, như thế này

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>

cũng có, bạn có thể sao chép tất cả các thuộc tính từ chuỗi (dựa trên các câu hỏi, bạn sẽ có được iframe như một chuỗi từ máy chủ) chứa thẻ và chuyển thẻ đó đến thẻ mới, như thế

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

Nếu bạn không muốn sử dụng dangerouslySetInnerHTML sau đó bạn có thể sử dụng các giải pháp dưới đây đề cập

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

bản demo ở đây sống có sẵn Demo