2016-03-01 45 views
0

我需要在iframe中顯示html頁面。我使用獲取獲取內容,因爲該頁面具有身份驗證。我沒有收到任何錯誤,我沒有看到任何內容太reactjs iframe不顯示html

someFunc() { 
    const myIframe = this.refs.myIframe;  
    fetch('http://example.com/example.html', { 
    method: 'GET', 
    headers: { 
     'Content-Type': 'text/html', 
     'Authorization': 'Basic xyz' 
    } 
    }).then(function(response) { 
     return response.text(); 
    }).then(function(text){ 
     //assign srcDoc to text 
     return <iframe srcDoc={text}></iframe>; 
    }); 
} 
render() { 
    return (<div>{this.someFunc()}</div>) 
} 

回答

0

爲什麼你不只是做:<iframe src="http://example.com/example.html"></iframe>

否則,它不起作用的原因是then函數返回後執行。所以,你可以做的是創造一些國家的孩子,並設置它在當時的作用,並使其在renderfunction:

var Example = React.createClass({ 
componentDidMount: function() { 
    var setState = this.setState; 
    const myIframe = this.refs.myIframe;  
    fetch('http://example.com/example.html', { 
    method: 'GET', 
    headers: { 
     'Content-Type': 'text/html', 
     'Authorization': 'Basic xyz' 
    } 
    }).then(function(response) { 
     return response.text(); 
    }).then(function(text){ 
    setState({child: <iframe srcDoc={text}></iframe>}); 
    }); 
}, 
getInitialState: function() { 
    return {child: <div> hello </div>}; 
}, 
render: function() { 
    return (<div>{this.state.child}</div>) 
} 
}); 

React.render(
    <Example />, 
    document.getElementById('mount-point')); 
+0

我感動componentDidMount內提取和設置的孩子的狀態,但我仍然沒有看到iframe中。裏面渲染我做{this.state.child} – shresthaal

+0

好的,我會做一個codepen。 –

+0

我編輯它,我有問題,因爲Cors你的獲取,但基本上它應該爲反應網站工作。 –