Reactコンポーネントの間隔で<img>ソースをローテーションするにはどうすればよいですか？

Question

かなり簡単な問題ですが、私の脳はクリックしていません。下の非常に基本的なReactコンポーネントでは、ソースは設定された間隔で移行し、変更する必要があります。

import React from 'react'; 

export default React.createClass({ 

    componentDidMount() { 
    setInterval((function() { 
     // switch the image source 
    })(), 5000) 
    } 

    render() { 

    const images = [ 
     "/assets/images/img01", 
     "/assets/images/img02", 
     "/assets/images/img03", 
     "/assets/images/img04", 
    ]; 

    return (
     <div id="rotatingImg"> 
     <img src="/assets/images/img01.jpg" /> 
     </div> 
    ) 
    } 
}); 

Answer 1

コンポーネントを内部から再描画する必要があります。この状態を変更します。状態が変わるたびにコンポーネントが再レンダリングされます。

import React from 'react'; 

export default React.createClass({ 

    constructor(props) { 
    super(props); 

    this.state = { 
     currentImage: 0 
    }; 
    } 

    getRandomImageId() { 
    const min = 0; 
    const max = 3; 
    return Math.floor(Math.random() * (max - min)) + min; 
    } 

    componentDidMount() { 
    setInterval((function() { 
     this.setState({ 
     currentImage: this.getRandomImageId() 
     }); 
    })(), 5000) 
    } 

    render() { 

    const images = [ 
     "/assets/images/img01", 
     "/assets/images/img02", 
     "/assets/images/img03", 
     "/assets/images/img04", 
    ]; 

    return (
     <div id="rotatingImg"> 
     <img src={images[this.state.currentImage]} /> 
     </div> 
    ) 
    } 
});