Предыдущий и следующий методы React Slick выдают ошибку

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>

Я пытаюсь использовать реагирующую гладкую карусель. Я попытался немного настроить его, поэтому я создал кнопки «Далее» и «Предыдущий», которые должны запускать метод карусели для следующего и предыдущего. Чтобы было ясно, я разрабатываю в SPFX, который является платформой SharePoint, React с Typescript. Я получаю следующую ошибку, когда код написан: (то же самое для this.slider внутри компонента Slider)

Предыдущий и следующий методы React Slick выдают ошибку

Я разработал их документы здесь: https://react-slick.neostack.com/docs/example/previous-next-methods Я пытался создать переменные в виде слайда и слайдера и добавить их в качестве реквизита, состояния или просто переменной внутри моего класса, но это не удалось.

Я ожидаю, что кнопки вызовут следующий и предыдущий методы...

Ценим любую помощь!

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
5 670
5
Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

вам нужно определить тип для вашего ref, который должен быть типом HTMLDivElement, вот как это сделать: в вашем компоненте класса добавьте это:

private slider = React.createRef<HTMLDivElement>()

сделал это сейчас и получил другую ошибку внутри методов: свойство 'slickNext' не существует для типа 'RefObject<HTMLDivElement>'.ts(2339) @adel

אוראל הינדי 10.07.2019 00:52

Вы установили реактивный гладкий тип здесь npmjs.com/package/@types/react-slick

adel 10.07.2019 06:51
Ответ принят как подходящий

Пример демо:

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;
}

не могли бы вы также поделиться интерфейсами? @Lee_MSFT

אוראל הינדי 10.07.2019 06:46

Использование функционального компонента

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

Для функциональных компонентов

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;

Для компонентов на основе классов

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;

Другие вопросы по теме

Похожие вопросы

Как сделать модальное всплывающее окно при нажатии на ссылку?
Создание независимых секундомеров для каждого элемента в массиве. Установка времени остановки на основе данных, возвращаемых API
Как я могу определить значение по умолчанию для реакции-выбора v1
Как уведомить внешний интерфейс о необходимости обновления после установки пользовательского утверждения с помощью облачных функций Firebase onCreate listener
Использование двух style.css для одного и того же приложения реакции
React Router не кодирует амперсанд, а кодирует пробелы в параметрах пути
Невозможно изменить цвет границы Material-UI OutlinedInput
Как передать значение выбора из календаря на вход
Пользовательская поддержка React-router не передается компоненту. тернарный оператор работает некорректно
Необходимо отредактировать момент в Antd Datepicker, чтобы отобразить полное название месяца