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。编写代码时出现以下错误：（滑块组件内的 this.slider 相同）

我在这里根据他们的文档开发： https://react-slick.neostack.com/docs/example/previous-next-methods 我试过将变量创建为幻灯片和滑块，并将它们添加为道具或状态，或者只是我 class 中的一个变量，但它没有成功..

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

感谢任何帮助！

Answer 1

你需要为你的 ref 定义类型，它需要是 HTMLDivElement 的类型，具体方法如下：在您的 class 组件中添加：

private slider = React.createRef<HTMLDivElement>()

Answer 2

示例演示：

import * as React from 'react';
import styles from './ReactSpFx.module.scss';
import { IReactSpFxProps } from './IReactSpFxProps';
import { escape } from '@microsoft/sp-lodash-subset';

import { SPHttpClient, SPHttpClientResponse, SPHttpClientConfiguration } from '@microsoft/sp-http';

import Slider from "react-slick";
import "../../../../node_modules/slick-carousel/slick/slick.css"; 
import "../../../../node_modules/slick-carousel/slick/slick-theme.css";
import { any } from 'prop-types';

export interface IReactItem{ 
  ID:string,
  Title:string,
  Address:string
}

export interface IReactGetItemsState{ 
  items:IReactItem[]
}

export default class ReactSpFx extends React.Component<IReactSpFxProps,IReactGetItemsState> {

  public constructor(props: IReactSpFxProps) {
    super(props);
    this.state = {
      items:[]   
    };
    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);    
  }


  public componentDidMount() {
    var reactHandler = this;
    this.props.context.spHttpClient.get(`${this.props.context.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('TestList')/items?select=ID,Title,Address`,
    SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => {  
      response.json().then((responseJSON: any) => {            
        reactHandler.setState({
          items: responseJSON.value
        });
      });  
    });   
  }

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

  public render(): React.ReactElement<IReactSpFxProps> {
    const settings = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1
    };
    return (
      <div className={styles.reactSpFx}>
        <div className={styles.container}>  
        {(this.state.items || []).map(item => (
            <div key={item.ID} className={styles.row}>{item.Title}
            <div dangerouslySetInnerHTML={{ __html: item.Address.replace(/[\n\r]/g,"<br/>")}}></div> 
          </div> 
          ))}                          
        </div>
        <div>
          <h2> Single Item</h2>
          <Slider ref={c => (this.slider = c)} {...settings}>
            <div>
              <h3>1</h3>
            </div>
            <div>
              <h3>2</h3>
            </div>
            <div>
              <h3>3</h3>
            </div>
            <div>
              <h3>4</h3>
            </div>
            <div>
              <h3>5</h3>
            </div>
            <div>
              <h3>6</h3>
            </div>
          </Slider>
          <br/>
          <div style={{ textAlign: "center" }}>
          <button className="button" onClick={this.previous}>
            Previous
          </button>
          <button className="button" onClick={this.next}>
            Next
          </button>
        </div>
        </div>
      </div>      
    );    
  }
}

假设你的意思是 IReactSpFxProps

import { WebPartContext } from '@microsoft/sp-webpart-base';
export interface IReactSpFxProps {
  description: string,
  context: WebPartContext;
}

Answer 3

使用功能组件

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```

Answer 4

对于基于函数的组件

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

const Homepage = () => {

  //creating the ref
  const customeSlider = useRef();

  // setting slider configurations
  var settings = {
dots: false,
infinite: true,
speed: 500,
autoplay: true,
autoplaySpeed: 3000,
slidesToShow: 4,
slidesToScroll: 1,
initialSlide: 0,
arrows: false,
}

  const previous = () => {
    customeSlider.current.slickNext();
  };

  const next = () => {
    customeSlider.current.slickPrev();
  };

  return (
    <div>
      <button onClick={next}>Next</button>
      <button onClick={previous}>Previous</button>
      <Slider {...settings} ref={customeSlider}>
        <div>One</div>
        <div>Two</div>
        <div>Theree</div>
        <div>Four</div>
        <div>Five</div>
      </Slider>
    </div>
  )


}

export default Homepage;

Answer 5

对于基于 Class 的组件

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

class Homepage extends Component {

 constructor(props){
      super(props);
      this.next=this.next.bind(this);
      this.previous=this.previous.bind(this)
 }
 next(){
      this.slider.slickNext();
 }
 previous(){
      this.slider.slickPrev();
 }

render() {
 // setting slider configurations
 var settings = {
dots: false,
infinite: true,
speed: 500,
autoplay: true,
autoplaySpeed: 3000,
slidesToShow: 4,
slidesToScroll: 1,
initialSlide: 0,
arrows: false,
}


  return (
    <div>
      <button onClick={this.next}>Next</button>
      <button onClick={this.previous}>Previous</button>
      <Slider ref={c=>(this.slider=c)} {...settings}>
        <div>One</div>
        <div>Two</div>
        <div>Theree</div>
        <div>Four</div>
        <div>Five</div>
      </Slider>
    </div>
  )

}
}

export default Homepage;

React Slick prev 和 next 方法抛出错误

React Slick prev and next methods throw an error

typescript

reactjs

sharepoint-online

slick.js

spfx