React を使用して画像カルーセルコンポーネントを完成させる-htmlチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-03-08 17:36:20

オリジナル

3096 人が閲覧しました

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

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 サイトの他の関連記事を参照してください。