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

【问题标题】：ion-slides - dynamic amount of slidesion-slides - 幻灯片的动态数量
【发布时间】：2020-08-19 01:22:07
【问题描述】：

操作系统：Win10 专业版
离子版本：CLI 6.6.0
节点版本：v14.0.0

我正在使用IonSlides 组件，但遇到了following issue。
我有一个日期数组，必须为每个日期创建一个IonSlide 组件。用户可以重新安排开始和结束日期。如果日期数组的长度与之前的长度不同，则布局中断。
我设法让它手动调用Swiper API，并通过这种解决方法正确显示幻灯片。

目前在 MacOS 上的同事遇到以下错误消息，我在 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;

【问题讨论】：

我发现，该解决方法创建了一个水平和垂直可滑动的 IonSlides，这就是滚动条不可见的原因。

标签： reactjs typescript ionic-framework ion-slides

【解决方案1】：

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

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

【讨论】：