如果React.js中的状态发生变化，如何更新swiper.js？

Question

我的状态为“ isOpen = false”，状态变为true时，我需要更新或重新初始化swiper.js。怎么可能？

@observable 
public isOpen=false

private DOMTopSwiper = createRef<HTMLDivElement>()

const topSwiper = new Swiper(this.DOMTopSwiper.current, {
  spaceBetween: 0,
  navigation: {
    nextEl: ".top-swiper-button-next",
    prevEl: ".top-swiper-button-prev",
  },
})

Answer 1

也许使用此https://github.com/kidjp85/react-id-swiper，然后注入道具的组队，探索组分，其与母体组件状态的参考。

import React from 'react';
import Swiper from 'react-id-swiper';

class Example extends React.Component {

  state={
     isOpen:false
  };

  render() {
    const params = {
      pagination: {
        el: '.swiper-pagination',
        type: 'bullets',
        clickable: true
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev'
      },
      spaceBetween: 30
    }

    return(
      <Swiper isOpen={this.state.isOpen} {...params}>
        <div>Slide 1</div>
        <div>Slide 2</div>
        <div>Slide 3</div>
        <div>Slide 4</div>
        <div>Slide 5</div>
      </Swiper>
    )
  }
}

export default Example;