web-dev-qa-db-ja.com

Reactでイベントハンドラーが呼び出されるたびにreact-id-swiperをリセットするにはどうすればよいですか？

スライダーをロードするためにreactでreact-id-swiperモジュールを使用しています。ユーザーがボタンをクリックするたびに、異なるIDのAPIが呼び出され、状態が異なるID属性を持ついくつかのボタンにonClickイベントハンドラーを設定しました。が更新されたため、ImageSliderコンポーネントが読み込まれ、一部の画像がモーダルのスライダーに表示されます。画像は期待どおりに表示されますが、問題は、新しいボタンがクリックされるたびに新しい画像が読み込まれるが、ページ付けボタンがリセットされず、ページ付けボタンの数が最初のAPI呼び出し画像の数に固定されることです。だから、スワイパーはリセットされないと思います。コンポーネントでスワイパーがレンダリングされる前に、スワイパーをリセットまたは破棄する方法に取り組んでいますが、運がありません。

これまでに言及されたページをチェックしましたが、解決策を見つけることができませんでした！react-id-swiper および- react-id-swiper npm

これはImageSliderコンポーネントです。

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

class ImageSlider extends Component {
    render() {
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            runCallbacksOnInit: true,
            onInit: (swiper) => {
                this.swiper = swiper
            }
        }
        const slides = this.props.sliderImages;
        let imgSlider = slides.map((slide,index) => 
                <div key={index}><img src={ 'http://172.16.1.74:8000'+ slide.url } key={index} className="img-fluid sliderImg" alt="alt title" /></div>
            );

      return (
        <div>
            <Swiper {...params}>
                { imgSlider }
            </Swiper>
        </div>
      )
    }
}

export default ImageSlider;

簡単で率直な答えをいただければ幸いです、ありがとう。

javascriptreactjsswiper
4
H.Sdq

Swiperに渡すパラメータにrebuildOnUpdate: truepropを追加することで解決策を見つけました。小道具の完全なリストはここにあります react-id-swiperオリジナルの小道具 。

0
H.Sdq

Swiperアップデートのソリューション。reduxを使用してアイテムをロードしています。 shouldSwiperUpdateが私に代わって仕事をしてくれます。

<Swiper {...params} shouldSwiperUpdate>
{books === null ? (
<List />
) : (
books.map(book => (
<div key={book._id}>
<CardItem book={book} />
              </div>
            ))
          )}
        </Swiper>`

`

0
malik Mazhar Ali

しばらく前に同様の問題が発生しました。解決策が機能するかどうかを確認してください。

スライドの小道具が更新されたら、更新方法を使用して手動でスワイパーを更新する必要があります。 APIドキュメント

import Swiper from 'react-id-swiper';
import 'react-id-swiper/src/styles/css/swiper.css';

class ImageSlider extends Component {
  componentDidUpdate(prevProps) {
    // when slides changes
    if(this.swiper && prevProps.sliderImages !== this.props.sliderImages) {
      // update swiper internally
      this.swiper.update();
      // go to first slide
      this.swiper.slideTo(0, 0);
    }
  }

    render() {
        const params = {
            pagination: {
                el: '.swiper-pagination',
                clickable: true
            },
            runCallbacksOnInit: true,
            onInit: (swiper) => {
                this.swiper = swiper
            }
        }
        const slides = this.props.sliderImages;
        let imgSlider = slides.map((slide,index) => 
                <div key={index}><img src={ 'http://172.16.1.74:8000'+ slide.url } key={index} className="img-fluid sliderImg" alt="alt title" /></div>
            );

      return (
        <div>
            <Swiper {...params}>
                { imgSlider }
            </Swiper>
        </div>
      )
    }
}

export default ImageSlider;
0
Santiago Pernigotti