gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 09:13:01 26 4
gpt4 key购买 nike

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 相同)

enter image description here

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

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

感谢任何帮助!

最佳答案

使用功能组件

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

关于reactjs - React Slick prev 和 next 方法抛出错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56960836/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com