reactjs - 通过位于 REACT 中不同路径的另一个组件管理组件的重新加载

Question

我的反应应用程序遇到困难。我有一个循环调用 iframe 的组件，使它们可见几秒钟。“重新加载”通过一个按钮进行。但是，我需要从另一个页面检查 iframe 重新加载。例如，创建一个“configuration.js”组件，其中有一个按钮，一旦单击，就会激活“重新加载”功能。然而，iframe 重新加载在“http://localhost:3000/simulatoretv”中呈现，而启动重新加载的按钮出现在“http://localhost:3000/configurator”中。我希望我已经足够清楚了。我附上了组件“广告”的脚本，通过它我运行 iframe 的重新加载。

import React, { Component } from "react";

class Pubblicità extends Component {
  state = {
    index: 0,
    iframeSrcs: ["/300x250", "/160x600", "/468x60"], 
    visibility: false
  };

  reload = () => {
    const iframeLength = this.state.iframeSrcs.length;
    if (this.state.index < iframeLength) {
      this.setState({
        index: this.state.index + 1,
        visibility: true
      });
    } else {
      this.setState({ index: 0, visibility: true }); //starting again
    }
    setTimeout(() => {
      this.setState({ visibility: false });
    }, 15000);
  };
  render() {
    return (
      <div>
        <button
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            top: 500
          }}
          onClick={this.reload}
        >
          pubblicità
        </button>
        {this.state.visibility ? (
          <iframe
            style={{
              position: "absolute",
              left: 500,
              right: 0,
              top: 10
            }}
            key={this.state.index}
            title="AdSlot"
            src={this.state.iframeSrcs[this.state.index]}
            height="100%"
            width="100%"
            scrolling="no"
            frameborder="0"
          />
        ) : (
          ""
        )}
      </div>
    );
  }
}
export default Pubblicità;

这是另一个组件，我希望“Pubblicità”组件显示受控的 iframe。这个组件的路由是“http://localhost:3000/platformOTT”。

import React, { Component } from "react";
import SimulatoreTV from "./SimulatoreTV";
import Pubblicità from "./Pubblicità";

class PiattaformaOTT extends Component {
  render() {
    return (
      <div>
        <SimulatoreTV />
        <Pubblicità />
      </div>
    );
  }
}

export default PiattaformaOTT;

感谢那些想帮助我的人。

标签： reactjsreact-router