2
  • 操作系统：Win10 Pro
  • 离子版本：CLI 6.6.0
  • 节点版本：v14.0.0

我正在使用IonSlides组件，并且遇到了以下问题。
我有一个日期数组，并且必须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;
4

1 回答 1

0

关于这篇文章，我通过向IonSlides 组件添加一个键并删除解决方法来解决它。

<IonSlides ref={this.slidesRef} scrollbar={true} options={this.props.slideOpts} key={this.props.slides.length}>
于 2020-05-08T10:04:34.220 回答