你如何使用 ReactJS 重新加载 iframe？答案

【问题标题】：How do you reload an iframe with ReactJS?你如何使用 ReactJS 重新加载 iframe？
【发布时间】：2018-07-27 13:43:39
【问题描述】：

我的 ReactJS 组件包含一个 iframe。为了响应外部页面中的事件，我需要重新加载 iframe。如果用户导航到 iframe 中的另一个页面，我需要将其重置为我第一次加载页面时的 URL。此 URL 在this.props 中可用。

我尝试过使用forceUpdate()。我可以看到这会导致 render 方法运行，但 iframe 没有被重置——大概是因为 React 无法判断出任何东西都发生了变化。

目前我正在向 iframe 的查询字符串附加一些随机文本：此 URL 更改强制 React 重新呈现 iframe。但是这感觉有点脏：iframe 中的页面超出了我的控制范围，所以谁知道这个额外的查询字符串值可能会做什么？

resetIframe() {
    console.log("==== resetIframe ====");
    this.forceUpdate();
}

public render() {
    console.log("==== render ====");

    // How can I use just this.props.myUrl, without the Math.random()?
    let iframeUrl = this.props.myUrl + '&random=' + Math.random().toString();

    return <div>
        <button onClick={() => { this.resetIframe(); }}>Reset</button>
        <iframe src={iframeUrl}></iframe>
    </div>
}

（我也在使用 TypeScript，如果这有什么不同的话。）

【问题讨论】：

标签： reactjs iframe

【解决方案1】：

我会用随机数创建一个state 变量，然后在resetIframe 上更新它：

state = {
     random: 0
}
resetIframe() {
    this.setState({random: this.state.random + 1});
}

public render() {
    return <div>
        <button onClick={() => { this.resetIframe(); }}>Reset</button>
        <iframe key={this.state.random} src={this.props.myUrl}></iframe>
    </div>
}

这是一个小提琴工作：https://codesandbox.io/s/pp3n7wnzvx

【讨论】：

尽管如此，您仍在向 URL 附加内容 - 这是我要避免的部分。我真正想要的是<iframe src={this.props.myUrl}>
看看我的回答。我认为如果你将两者结合起来，它会按照你想要的方式工作。
Reading around，人们似乎不赞成以这种方式使用key，说这不是使用 React 的纯粹方式。但是他们的解决方案是调用forceUpdate()，这不起作用；更改 key 的值确实工作，所以我要这样做。谢谢！ :)
这按预期工作。然而，重新加载时 iframe flikers。有什么解决办法吗？

【解决方案2】：

您可以创建一个新组件来加载您的 iframe。在您的主要组件中加载它并为其提供一个更新道具，您在 iframe 组件中忽略该道具。如果您使用状态变量设置道具，您的组件将重新加载。你可以看看 Diogo Sgrillo 对 setState 方法的回答。

您也可以通过shouldcomponentupdate() 检查道具是否发生了变化，并且只有在它发生变化时才更新。

【讨论】：

【解决方案3】：

这里可能有点晚了 :) 附注：当您根据先前的状态更新状态时，您应该将一个函数传递给 setState：

resetIframe() {
    this.setState(prevState => {random: prevState.random + 1});
}

【讨论】：

【解决方案4】：

对于 Javascript 框架和技术，如果您更新密钥，它会自动重新加载 iFrame。因此，您只想为您的操作增加（或随机数）键的值。

state = {
    iframe_key: 0,
    iframe_url: 'https://www.google.com/maps' //Your URL here
}
iframeRefresh() {
    this.setState({iframe_key: this.state.iframe_key + 1});
}

public render() {
    return (
        <div>
            <button onClick={() => { this.iframeRefresh(); }}>Reload Iframe</button>
            <iframe key={this.state.iframe_key} src={this.state.iframe_url}> 
            </iframe>
        </div>
    );
}

【讨论】：