Sets TimeOut Funktion zu reagieren

Question

Ich habe folgende Objektliste:

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"} 
] 

Ich brauche eine Diashow zu erstellen, die eine konfigurierbare Dauer hat (1 s, 5, 10 s). Bisher kann ich eine Liste der Medien aus dem Was ich will, 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> 
    ) 
} 

erzeugen jetzt zu tun ist, die Medien einer nach dem anderen mit konfigurierbaren Dauer für automatische Wiedergabe erzeugen.

Ich weiß, ich brauche eine gewisse Form einer SetTimeout Funktion wie in diesem Beispiel verwenden:

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

Ich bin nur nicht sicher, wie es für dieses Szenario zu implementieren. (Ich glaube, ich muss CSS für die Überblendungen verwenden, aber ich bin einfach ratlos, wie man den Übergang überhaupt erstellt)

Answer 1

Wenn Sie die Medien alle 5 Sekunden ändern möchten, haben Sie Aktualisieren des Status zum erneuten Rendern der Komponenten Sie können auch setInterval anstelle von setTimeout verwenden. setTimeout wird nur einmal ausgelöst, setInterval wird alle X Millisekunden ausgelöst. Hier, wie es aussehen kann:

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> 
    ) 
    } 
} 

Im Grunde, was der Code tut, ist, dass alle 5 Sekunden werden die activeMediaIndex zum nächsten ändern. Wenn Sie den Status aktualisieren, wird ein erneuter Rendervorgang ausgelöst. Rendern Sie beim Rendern der Medien nur ein Medium (Sie können auch das vorherige und das nächste wie eine klassische Diashow rendern). So rendern Sie alle 5 Sekunden ein neues Medium.