Set TimeOut réagisse Fonction

Question

je la liste des objets suivants:

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

Je dois créer un diaporama qui a une durée configurable (1s, 5, 10s). Jusqu'à présent, je peux générer une liste des médias de la 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> 
    ) 
} 

Ce que je veux faire est maintenant générer les médias un à la fois avec des durées configurables pour AutoPlay.

Je sais que je dois utiliser une certaine forme d'une fonction setTimeout comme cet exemple:

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

Je ne suis pas sûr de savoir comment mettre en œuvre pour ce scénario. (Je crois que j'aurai besoin d'utiliser css pour les transitions de fondu mais je suis juste perplexe sur comment créer la transition en premier lieu)

Answer 1

Si vous voulez changer le média toutes les 5 secondes, vous aurez pour mettre à jour l'état afin de restituer vos composants Vous pouvez également utiliser setInterval au lieu de setTimeout. setTimeout sera déclenchée qu'une seule fois, setInterval sera déclenchée toutes les millisecondes X. Voici ce qu'il peut ressembler à:

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

Fondamentalement, ce que le code fait est que toutes les 5 secondes, va changer le activeMediaIndex à la suivante. En mettant à jour l'état, vous allez déclencher un nouveau rendu. Lors du rendu du média, restituez simplement un média (vous pouvez également rendre le précédent et le suivant comme un diaporama classique). Ainsi, toutes les 5 secondes, vous allez rendre un nouveau média.