ion-slides

Question

OS: Win10 专业版
离子版本：CLI 6.6.0
节点版本：v14.0.0

我正在使用 IonSlides component and I'm running into following issue。
我有一个日期数组，必须为每个日期创建一个 IonSlide 组件。用户可以重新安排开始和结束日期。如果日期数组的长度与之前的长度不同，布局就会中断。
我成功地手动调用了 Swiper API，并且使用此变通方法正确显示了幻灯片。

目前 Mac 上的一位同事OS 运行出现以下错误消息，我在 Windows（相同的 Ionic 和 Node 版本）上没有得到：

Unhandled Rejection (TypeError): Cannot read property 'length' of undefined
Swiper.removeAllSlides
node_modules/@ionic/core/dist/esm-es5/swiper.bundle-3fe6462e.js:2415
workaround
src/components/Slides/Slides.tsx:31
  28 | const workaround = async() => {
  29 |   // https://swiperjs.com/api/
  30 |   let swiper = await this.slidesRef.current.getSwiper();
> 31 |   swiper.removeAllSlides();
     | ^  32 |   swiper.appendSlide(this.props.slides.map((slide, i) => {
  33 |     return ReactDOMServer.renderToString(<Slide slide={slide} key={i} />); // redundanter code
  34 |   }));

此外，在调用 swiper.removeAllSlides(); 并重建幻灯片后，滚动条不见了。任何人都有提示，我该如何改进？

Slides.tsx（在 Slide 组件内部我使用的是 IonSlide 组件）

import { IonSlides } from '@ionic/react';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import './Slides.css';
import Slide from '../Slide/Slide'
import SlideObject from '../../models/SlideObject';
import SlideOptsObject from '../../models/SlideOptsObject';

interface SlidesProps {
  slides: Array<SlideObject>,
  slideOpts: SlideOptsObject
};

interface SlidesState {
};


class Slides extends React.Component<SlidesProps, SlidesState> {
  private slidesRef = React.createRef<any>();

  // wenn sich die slides geaendert haben -> aktualisieren
  componentDidUpdate(prevProps: SlidesProps) {
    if (this.props.slides.length !== prevProps.slides.length) {
      // update() einkommentieren, wenn workaround gefixt, https://github.com/ionic-team/ionic/issues/18784
      // this.slidesRef.current.update();

      const workaround = async() => {
        // https://swiperjs.com/api/
        let swiper = await this.slidesRef.current.getSwiper();
        swiper.removeAllSlides();
        swiper.appendSlide(this.props.slides.map((slide, i) => {
          return ReactDOMServer.renderToString(<Slide slide={slide} key={i} />); // redundanter code
        }));
        swiper.update();
        swiper.slideTo(this.props.slideOpts.initialSlide); // zur letzten Slide sliden
      };
      workaround();
    }
  }

  render() {
    return (
      <IonSlides ref={this.slidesRef} /*pager={true}*/ scrollbar={true} options={this.props.slideOpts}>
        {this.props.slides.map((slide, i) => {
          return <Slide slide={slide} key={i} />;
        })}
      </IonSlides>
    );
  }
};

export default Slides;

Answer 1

关于 this post，我通过向 IonSlides 组件添加 key 并删除解决方法来解决它。

<IonSlides ref={this.slidesRef} scrollbar={true} options={this.props.slideOpts} key={this.props.slides.length}>

ion-slides - 幻灯片的动态数量

ion-slides - dynamic amount of slides

reactjs

typescript

ionic-framework