reactjs - React Slick prev 和 next 方法抛出错误

Question

import * as React from 'react';
import styles from './Birthday.module.scss';
import { IBirthdayProps } from './IBirthdayProps';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { initializeIcons } from '@uifabric/icons';
initializeIcons();

import Slider from 'react-slick';

export default class Birthday extends React.Component<IBirthdayProps, {}> {


  public next() {
    this.slider.slickNext();
  }
  public previous() {
    this.slider.slickPrev();
  }

  public render(): React.ReactElement<IBirthdayProps> {
    const settings = {
      dots: true,
      infinite: true,
      rows: 2,
      slidesPerRow: 2,
      slidesToShow: 1,
      speed: 500,
      appendDots: dots => (
        <div
          style={{
            backgroundColor: '#ddd',
            padding: '5px',
            display: 'flex'
          }}
        >
          <ul style={{ margin: '0px', padding: '0px' }}> {dots} </ul>
        </div>
      )
    };
    return (
      <div className={styles.wrapper}>
        <Slider ref={slider => (this.slider = slider)} {...settings}>
          <div className={styles.item}>
            <h3>1</h3>
          </div>
          <div className={styles.item}>
            <h3>2</h3>
          </div>
          <div className={styles.item}>
            <h3>3</h3>
          </div>
          <div className={styles.item}>
            <h3>4</h3>
          </div>
          <div className={styles.item}>
            <h3>5</h3>
          </div>
        </Slider>
        <div style={{ display: 'flex', padding: '30px', marginTop: '30px' }}>
          <Icon
            iconName="ChevronLeftSmall"
            className={styles.customArrow}
            onClick={this.next}
          />
          <Icon
            iconName="ChevronRightSmall"
            className={styles.customArrow}
            onClick={this.previous}
          />
        </div>
      </div>
    );
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

我正在尝试使用 React slick 轮播。 我尝试对其进行一些自定义，因此我创建了下一个和上一个按钮，它们应该触发轮播的下一个和上一个方法。 需要明确的是，我正在使用 SPFX 进行开发，这是 SharePoint 框架，React with Typescript。 编写代码时出现以下错误:( slider 组件内的 this.slider 相同)

我在这里由他们的文档开发: https://react-slick.neostack.com/docs/example/previous-next-methods 我试过将变量创建为 slide 和 slider，并将它们添加为 props 或 state 或只是我类(class)中的一个变量，但它没有成功..

我希望按钮触发 next 和 prev 方法...

感谢任何帮助!

Answer 1

使用功能组件

import React, { useState } from 'react'
import Slider from "react-slick";

const Homepage = () => {

  //creating the ref
  const customeSlider = React.creatRef();

  // setting slider configurations
  const [sliderSettings, setSliderSettings] = useState({
    infinite: true,
    speed: 500,
    slidesToShow: 2,
    slidesToScroll: 2,
    arrows: false,
  })

  const gotoNext = () => {
    customeSlider.current.slickNext()
  }

  const gotoPrev = () => {
    customeSlider.current.slickPrev()
  }

  return (
    <div>
      <button onClick={()=>gotoNext()}>Next</button>
      <button onClick={()=>gotoPrev()}>Previous</button>
      <Slider {...sliderSettings} ref={customeSlider}>
        <div>One</div>
        <div>Two</div>
        <div>Theree</div>
        <div>Four</div>
        <div>Five</div>
      </Slider>
    </div>
  )


}
export default Homepage```