リアクションサイクリング画像ギャラリー

Question

多くの画像を表示するコンポーネントを作成したいのですが、時間の経過後に1つの画像が変更されます。

これまでのところ、私はこのコードを持っている：私はそれは6x6のグリッドからランダムに画像を切り替えると、画像からランダム画像でそれを切り替えたい

import React from 'react'; 

const Gallery = (props) => { 


    const cellStyle = { 
    background: "red", 
    padding: "0" 
    } 

const ImageCell = (props) => { 
    return (
     <div className="col-lg-4" style={cellStyle}> 
     <div style={{ 
       height: "100%", 
       width: "100%", 
       padding: "0", 
       background: `url(${props.theImage})`, 
       backgroundSize: "cover" 
      }} 
     > 

     </div> 
     </div> 
); 
} 

return(
    <div className="row full-width"> 
     { 
      props.images.map(function(image) { 
       let theKey = image.slice(14, -4); 
       return <ImageCell key={theKey} theImage={image} /> 
      }) 
     } 
    </div> 
); 

} 

export default Gallery; 

は、だから私は「ドン

を設定私はこれを実装する方法を本当に知っている、任意のアイデアは歓迎されます。

Answer 1

Galleryはランダム化ロジックを保持し、そのイメージをその子ノードに渡す必要があります。

したがって、画像の表示はGallery10の状態の配列で設定できます。 componentDidMountメソッドを実装し、そこにタイマーをインスタンス化します。タイマーが起動すると、州の配列内の画像の1つを、画像の配列全体からランダムに選択された画像に置き換えることができます。状態を更新すると、Galleryが再レンダリングされ、子をImageCellに再レンダリングします。