使用 React 定期重新加载 iframe 的最佳方法是什么？答案

【问题标题】：What's the best way to periodically reload an iframe with React?使用 React 定期重新加载 iframe 的最佳方法是什么？
【发布时间】：2017-01-10 19:26:50
【问题描述】：

我正在使用 React 构建网页，这意味着我无法直接操作 DOM。我尝试通过更新 url 状态来重新加载我的 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} />
    )
}

【问题讨论】：

使用forceUpdate 会强制重新渲染（）：facebook.github.io/react/docs/react-component.html#forceupdate
我试过了，但它没有做任何事情 iframe 仍然没有重新加载
定义“没有做任何事情”。对forceUpdate 的调用保证会在您的组件中调用render，这必然会重新绘制iframe。你能创建一个 plunkr 或 codepen 吗？
不是强制更新，可能是我用错了。我刚刚替换了 this.setState({currentUrl:currentUrl});用 this.forceUpdate()
那支笔对我有用！如果您将console.log('Rendering'); 放在render() 函数的顶部（return 之前），您会看到它实际上会重新渲染。也许 iframe 本身的内容没有改变？但这将在 React 之外。

标签： javascript reactjs iframe

【解决方案1】：

更改组件的关键属性例如：

this.state = {iframeKey: 0};

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

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

【讨论】：

【解决方案2】：

这是ref 属性的用例，如果我假设 iframe 的内容不受反应控制。将一个应用到 iframe，然后使用 setInterval 刷新 iframe url。

当您将 URL 设置为 state 时 iframe 未更新的原因是 url 没有更改（？）并且在这种情况下 react 不会重绘。

【讨论】：

我也是这么想的，所以我一直在 url 的末尾添加“1”，看看它是否会更新到无效的网站。 iframe 从未重新加载，但是当我打开控制台时，我可以看到 src 属性正在更新，因此 react 正在操作元素，但 iframe 没有重新加载。