Question

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

我已尝试使用forceUpdate()。我可以看到这会导致render方法运行，但iframe无法重置 - 大概是因为React无法判断任何内容已发生变化。

目前，我将一些随机文字附加到iframe的查询字符串中：此网址更改会强制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，如果这有所不同。）

Answer 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

Answer 2

您可以创建一个只加载iframe的新组件。在你的主要组件中加载它并给它一个更新支柱，你在iframe组件中忽略它。如果使用状态变量设置prop，则组件将重新加载。你可以看看Diogo Sgrillo对setState方法的回答。

您还可以使用shouldcomponentupdate()检查道具是否已更改，只有更改后才会更新。

如何使用ReactJS重新加载iframe？

2 个答案: