Установите TimeOut для функции реагирования

У меня есть следующий список объектов:

mediaList[
 {id:1, url:"www.example.com/image1", adType:"image/jpeg"},
 {id:2, url:"www.example.com/image2", adType:"image/jpg"},
 {id:3, url:"www.example.com/video1", adType: "video/mp4"}
]

Мне нужно создать слайд-шоу с настраиваемой продолжительностью (1 с, 5, 10 с). Пока я могу создать список медиа из mediaList

  renderSlideshow(ad){
    let adType =ad.adType;
    if(type.includes("image")){
      return(
        <div className="imagePreview">
          <img src={ad.url} />
        </div>
      );
    }else if (adType.includes("video")){
      return(
        <video className="videoPreview" controls>
            <source src={ad.url} type={adType}/>
          Your browser does not support the video tag.
        </video>
      )

    }
  }

 render(){   
    return(
      <div>
          {this.props.mediaList.map(this.renderSlideshow.bind(this))}
      </div>
    )
 }

Что я хочу сделать сейчас, так это генерировать медиа по одному с настраиваемой продолжительностью для автозапуска.

Я знаю, что мне нужно использовать некоторую форму функции setTimeout, как в этом примере:

setTimeout(function(){
         this.setState({submitted:false});
    }.bind(this),5000);  // wait 5 seconds, then reset to false

Я просто не уверен, как реализовать это для этого сценария. (Я считаю, что мне нужно будет использовать css для переходов затухания, но я просто в тупике, как создать переход в первую очередь)


reactjs javascript timeout slideshow
person lost9123193    schedule 21.03.2017    source источник

Ответы (2)


arrow_upward
5
arrow_downward

Если вы хотите менять носитель каждые 5 секунд, вам придется обновить состояние для повторного рендеринга ваших компонентов. Вы также можете использовать setInterval вместо setTimeout. setTimeout будет запускаться только один раз, setInterval будет запускаться каждые X миллисекунд. Вот как это может выглядеть:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { activeMediaIndex: 0 };
  }

  componentDidMount() {
    setInterval(this.changeActiveMedia.bind(this), 5000);
  }

  changeActiveMedia() {
    const mediaListLength = this.props.medias.length;
    let nextMediaIndex = this.state.activeMediaIndex + 1;

    if(nextMediaIndex >= mediaListLength) {
      nextMediaIndex = 0;
    }

    this.setState({ activeMediaIndex:nextMediaIndex });
  }

  renderSlideshow(){
    const ad = this.props.medias[this.state.activeMediaIndex];
    let adType = ad.adType;
    if(type.includes("image")){
      return(
        <div className="imagePreview">
          <img src={ad.url} />
        </div>
      );
    }else if (adType.includes("video")){
      return(
        <video className="videoPreview" controls>
            <source src={ad.url} type={adType}/>
          Your browser does not support the video tag.
        </video>
      )

    }
  }

  render(){   
    return(
      <div>
          {this.renderSlideshow()}
      </div>
    )
  }
}

По сути, код делает то, что каждые 5 секунд меняет activeMediaIndex на следующий. Обновив состояние, вы вызовете повторный рендеринг. При рендеринге мультимедиа просто визуализируйте один медиафайл (вы также можете визуализировать предыдущий и следующий, как классическое слайд-шоу). Таким образом, каждые 5 секунд вы будете отображать новый медиафайл.

person Vincent D'amour    schedule 21.03.2017
comment
Это имеет смысл, только что протестировал его с небольшими обновлениями, и он работает! Спасибо - person lost9123193; 22.03.2017

arrow_upward
5
arrow_downward

Не забудьте очистить тайм-аут, чтобы предотвратить утечку памяти:

  componentDidMount() {
    this.timeout = setTimeout(() => {
     ...
    }, 300);
  }

  componentWillUnmount() {
    clearTimeout(this.timeout);
  }
person Leonardo    schedule 03.10.2018