怎么用React完成一個(gè)圖片輪播組件

這篇文章主要為大家展示了“怎么用React完成一個(gè)圖片輪播組件”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么用React完成一個(gè)圖片輪播組件”這篇文章吧。

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

　　<SlideMS><SlideM/>

　　<SlideS/><SlideMS/>

　　組件SlideM代表中圖組件，其始終維護(hù)一個(gè)state:currentMIndex,即當(dāng)前的中圖圖片的index值。

　　組件SlideS代表小圖組件，要維護(hù)兩個(gè)state:currentSIndex，currentSPage,即當(dāng)前的小圖圖片的index值和小圖當(dāng)前的頁(yè)數(shù)；

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

　　<SlideMSmediumImageArr={mediumImageArr}eachMediumImgWidth={616}smallImageArr={smallImageArr}eachSmallImgWidth={82}/>,document.getElementById('js-img-slide'));

　　SlideM、SlideS再?gòu)腟lideMS中獲取參數(shù)進(jìn)行內(nèi)部渲染。

　　<SlideMmediumImageArr={mediumImageArr}currentMIndex={currentMIndex}eachMediumImgWidth={eachMediumImgWidth}callback={(index)=>{self.setSmallIndex(index)}}/><SlideSsmallImageArr={smallImageArr}currentSIndex={currentSIndex}eachSmallImgWidth={eachSmallImgWidth}eachMediumImgWidth={eachMediumImgWidth}callback={(index)=>{self.setMediumIndex(index)}}/>

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

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

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

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

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

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

以上是“怎么用React完成一個(gè)圖片輪播組件”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！