使用React實(shí)現(xiàn)上述功能，首先，劃分組件：

<SlideMS> <SlideM/>
 <SlideS/><SlideMS/>

組件SlideM代表中圖組件，其始終維護(hù)一個state: currentMIndex,即當(dāng)前的中圖圖片的index值。
組件SlideS代表小圖組件，要維護(hù)兩個state: currentSIndex，currentSPage, 即當(dāng)前的小圖圖片的index值和小圖當(dāng)前的頁數(shù)；

外層組件SlideMS 接受幾個參數(shù)作為props：

<SlideMS     mediumImageArr={mediumImageArr}    eachMediumImgWidth = {616}    smallImageArr={smallImageArr}     eachSmallImgWidth = {82}/>, document.getElementById('js-img-slide'));
SlideM、SlideS再從SlideMS中獲取參數(shù)進(jìn)行內(nèi)部渲染。
<SlideM     mediumImageArr={mediumImageArr}    currentMIndex={currentMIndex}    eachMediumImgWidth = {eachMediumImgWidth}    callback={(index)=>{self.setSmallIndex(index)}} /><SlideS      smallImageArr={smallImageArr}      currentSIndex={currentSIndex}      eachSmallImgWidth={eachSmallImgWidth}      eachMediumImgWidth = {eachMediumImgWidth}      callback={(index)=>{self.setMediumIndex(index)}}/>

當(dāng)點(diǎn)擊中圖的切換按鈕時，計算圖片偏移量，然后將新的currentMIndex傳遞給父組件，父組件setState通知兩個子組件currentMIndex發(fā)生了改變；

小圖組件中涉及的計算比較多，可以將這些抽成方法，例如：根據(jù)給定的中圖寬度計算一頁有幾張小圖、計算小圖總頁數(shù)、根據(jù)給定的index值判斷小圖處于當(dāng)前哪一頁等。

當(dāng)點(diǎn)擊小圖組件的左右箭頭時，計算圖片的偏移量（首先計算一張中圖里有幾張小圖），然后setState修改小圖currentSPage的值。父組件setState通知兩個子組件currentMIndex發(fā)生了改變；

中圖、小圖組件分別在componentWillReceiveProps 里接收到了新的值的改變后，重新setState，更新組件內(nèi)部的state，就實(shí)現(xiàn)了兩者之間的通信。

以上是實(shí)現(xiàn)的一個思路。在實(shí)際應(yīng)用中，場景會復(fù)雜一些，例如，第一張圖片可能存在播放視頻的需求，還有當(dāng)點(diǎn)擊中圖圖片時，能切換到大圖模式，大圖模式下能正常輪播，并且在關(guān)閉大圖模式時，中圖和小圖自動定位到剛才最后一張瀏覽的圖片。這時會涉及稍微復(fù)雜一些的運(yùn)算，需要在此基礎(chǔ)上做一下兼容。

非常尷尬的一點(diǎn)：圖片輪播時的動畫效果，依舊使用了jquery的animate.

以上就是用React完成一個圖片輪播組件的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！