Управление перезагрузкой компонента через другой компонент, расположенный на другом маршруте в REACT - PullRequest
0 голосов
/ 03 февраля 2020

У меня проблемы с реакцией. У меня есть компонент, который циклически вызывает iframes, делая их видимыми на несколько секунд. «Перезагрузка» происходит с помощью кнопки. Однако мне нужно проверить перезагрузку iframe с другой страницы. Например, создайте компонент «configuration. js», в котором есть кнопка, которая после нажатия активирует функцию «перезагрузки». Перезагрузка iframe, однако, отображается в «http: // localhost: 3000 / simulatoretv», а кнопка, запускающая перезагрузку, присутствует в «http: // localhost: 3000 / configurator». Надеюсь, я был достаточно ясен. Я прикрепляю скрипт компонента «Реклама», через который запускаю перезагрузку iframes.

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à". Маршрут этого компонента - «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;

Спасибо тем, кто хочет мне помочь.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...