定期使用React重新加載iframe的最佳方式是什麼？

我正在使用React構建一個網頁，這意味着我無法直接操作DOM。我試圖通過更新url狀態來重新加載我的iframe，但似乎沒有重新加載頁面。這是我嘗試過的州代碼。定期使用React重新加載iframe的最佳方式是什麼？

componentDidMount: function() { 
    setInterval(function(){ 
     this.setState({currentUrl:currentUrl}); 
    }.bind(this), 1000); 
}, 
getInitialState: function() { 
    return {defaultUrl:this.props.graph.url, currentUrl:this.props.graph.url}; 
}, 
render() { 
    // render the graph iframe 
    return (
     <iframe src={this.state.currentUrl} id={this.props.graph.url} style={this.props.style} width={this.props.width} height={this.props.graph_height} /> 
    ) 
}

來源

2017-01-10 Kaitlyn

使用'forceUpdate'將迫使重新繪製（）：https://facebook.github.io/react/ docs/react-component.html＃forceupdate – lux

我已經試過，但它沒有做任何的iframe仍然沒有重新加載 – Kaitlyn

定義「沒有做任何事情」。對'forceUpdate'的調用可以保證在你的組件中調用'render'，這必然會重新繪製'iframe'。你可以創建一個plunkr或codepen嗎？ – lux

這是一個用例爲ref屬性如果作爲我假定，iframe的內容不是下反應控制。將一個應用於iframe，然後使用setInterval刷新iframe url。

當您將URL設置爲狀態時，iframe未更新的原因是url沒有更改（？），並且在這種情況下不會重新繪製。

來源

2017-01-10 19:42:51

這就是我的想法，所以我一直在網址的末尾添加「1」來查看它是否會更新到無效的網站。該iframe從來沒有重新加載，但當我打開控制檯，我可以看到更新src屬性，所以反應是操縱元素，但iframe不重新加載。 – Kaitlyn

我發佈了一個不同的問題，爲我解答了這個問題。在這裏看到了答案：How to use forceUpdate() correctly?

來源

2017-01-11 17:38:55 Kaitlyn

更改關鍵屬性組成例如：

this.state = {iframeKey: 0}; 

setInterval(() => this.setState(s => ({iframeKey: s.iframeKey + 1})), 1000); 

<Iframe key={this.state.iframeKey} url={some url}/>

來源

2017-12-20 00:45:57 Sergey

定期使用React重新加載iframe的最佳方式是什麼？

回答

相關問題