React を使用して画像カルーセル コンポーネントを完成させる

今回は React を使用して imageカルーセル コンポーネントを完成させる方法を紹介します。 React を使用して画像カルーセル コンポーネントを完成させるための 注意事項 は何ですか。

React を使用して上記の関数を実装します。 まず、コンポーネントを分割します。

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

コンポーネント SlideM は、状態を常に維持する China Picture コンポーネントを表します:

currentMIndex。現在の中国の写真の写真。 コンポーネント SlideS は、小さい画像コンポーネントを表し、現在の小さい画像のインデックス値と小さい画像の現在のページ番号である currentSIndex と currentSPage の 2 つの状態を維持する必要があります。

外側のコンポーネント 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 が変更されたことを 2 つの子コンポーネントに通知します。 ;

小さな画像コンポーネントに含まれる計算の比較 たとえば、中央の画像の指定された幅に基づいてページ上にある小さな画像の数を計算したり、小さな画像の合計数を計算したりする方法は数多くあります。ページ上で、指定されたインデックス値などに基づいて、小さな画像がどのページにあるかを判断します。

小さい画像コンポーネントの左矢印と右矢印をクリックすると、画像のオフセットが計算され（最初に中画像内に小さい画像がいくつあるか計算されます）、その後 setState によって小さい画像の currentSPage の値が変更されます。親コンポーネント setState は、currentMIndex が変更されたことを 2 つのサブコンポーネントに通知します。

componentWillReceiveProps で新しい値の変更を受け取った後、中ピクチャ コンポーネントと小さなピクチャ コンポーネントはそれぞれ、コンポーネント内の状態をリセットして更新します。これにより、コンポーネント間の接続が実現されます。 2つ目。

上記は実装のアイデアです。実際のアプリケーションでは、シーンはさらに複雑になります。たとえば、最初の画像でビデオを再生し、中央の画像をクリックすると、大画像モードに切り替えることができます。大きい画像モードがオフの場合、中画像と小さい画像は、直前に表示した最後の画像を自動的に見つけます。これにはもう少し複雑な操作が必要となり、これに基づいて互換性を確保する必要があります。

非常に恥ずかしい点: 画像カルーセル中の

アニメーション エフェクトは依然として jquery のアニメーションを使用しています。

以上がReact を使用して画像カルーセル コンポーネントを完成させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。