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)
Я разработал их документы здесь: https://react-slick.neostack.com/docs/example/previous-next-methods Я пытался создать переменные в виде слайда и слайдера и добавить их в качестве реквизита, состояния или просто переменной внутри моего класса, но это не удалось.
Я ожидаю, что кнопки вызовут следующий и предыдущий методы...
Ценим любую помощь!
вам нужно определить тип для вашего ref
, который должен быть типом HTMLDivElement
, вот как это сделать:
в вашем компоненте класса добавьте это:
private slider = React.createRef<HTMLDivElement>()
Вы установили реактивный гладкий тип здесь npmjs.com/package/@types/react-slick
Пример демо:
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
Использование функционального компонента
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;
сделал это сейчас и получил другую ошибку внутри методов: свойство 'slickNext' не существует для типа 'RefObject<HTMLDivElement>'.ts(2339) @adel