用React完成一個圖片輪播組件

這次帶給大家用React完成一個圖片輪播組件，使用React完成一個圖片輪播組件的注意事項有哪些，下面就是實戰案例，一起來看一下。

使用React實作上述功能，首先，分割元件：

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

元件SlideM代表中圖元件，其始終維護一個state: currentMIndex,即當前的中圖圖片的index值。
元件SlideS代表小圖元件，要維護兩個state: currentSIndex，currentSPage, 即目前的小圖圖片的index值和小圖目前的頁數；

外層元件SlideMS 接受幾個參數作為props：

<SlideMS     mediumImageArr={mediumImageArr}    eachMediumImgWidth = {616}    smallImageArr={smallImageArr}     eachSmallImgWidth = {82}/>, document.getElementById(&#39;js-img-slide&#39;));
SlideM、SlideS再从SlideMS中获取参数进行内部渲染。
<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)}}/>

當點擊中圖的切換按鈕時，計算圖片偏移量，然後將新的currentMIndex傳遞給父組件，父組件setState通知兩個子組件currentMIndex發生了改變；

小圖組件中涉及的計算比較多，可以將這些抽成方法，例如：根據給定的中圖寬度計算一頁有幾張小圖、計算小圖總頁數、根據給定的index值判斷小圖處於目前哪一​​頁等。

當點擊小圖組件的左右箭頭時，計算圖片的偏移量（先計算一張中圖裡有幾張小圖），然後setState修改小圖currentSPage的值。父組件setState通知兩個子組件currentMIndex發生了改變；

中圖、小圖組件分別在componentWillReceiveProps 裡接收到了新的值的改變後，重新setState，更新組件內部的state，就實現了兩者之間的通信。

以上是實現的一個想法。在實際應用中，場景會複雜一些，例如，第一張圖片可能存在播放影片的需求，還有當點擊中圖圖片時，能切換到大圖模式，大圖模式下能正常輪播，並且在關閉大圖模式時，中圖和小圖會自動定位到剛才最後一張瀏覽的圖片。這時會涉及稍微複雜的運算，需要在此基礎上做一下相容。

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

以上是用React完成一個圖片輪播組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！