如果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 ，然后将支持插入到Swiper组件，该组件是对父组件State的引用。

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;