[英]How to use AutoPlay methods with React-slick useRef hook and typescript
I'm currently using "typescript": "^3.7.5"
and "react-slick": "^0.25.2"
.我目前正在使用"typescript": "^3.7.5"
和"react-slick": "^0.25.2"
。
The problem I am facing is that I'm not able to use the auto play methods slickPlay
and slickPause
with the new useRef
hook and typescript.我面临的问题是我无法将自动播放方法slickPlay
和slickPause
与新的useRef
挂钩和 typescript 一起使用。
Goal: To be able to pause auto play and resume auto play with a play/pause button.目标:能够通过播放/暂停按钮暂停自动播放和恢复自动播放。 My play/pause button will be next to the pagination dots.我的播放/暂停按钮将在分页点旁边。
My Code:我的代码:
import React, { useStateuseRef } from 'react';
const myComponent = () => {
const [autoPlayOn, setAutoPlayOn] = useState<boolean>(true);
const sliderRef = useRef<typeof Slider | null>(null);
<Slider
ref={sliderRef}
appendDots={(dots): JSX.Element => (
<MyButton
onClick={() => {
setAutoPlayOn(!autoPlayOn);
if (autoPlayOn) {
sliderRef.slickPlay();
} else {
sliderRef.slickPause();
}
}}
/>
)}
{...otherSettings}
>
}
The type error that I am getting is:我得到的类型错误是:
No overload matches this call.
Overload 1 of 2, '(props: Readonly<Settings>): Slider', gave the following error.
Type 'MutableRefObject<typeof Slider | null>' is not assignable to type 'string | ((instance: Slider | null) => void) | RefObject<Slider> | null | undefined'.
Type 'MutableRefObject<typeof Slider | null>' is not assignable to type 'RefObject<Slider>'.
Types of property 'current' are incompatible.
Type 'typeof Slider | null' is not assignable to type 'Slider | null'.
Type 'typeof Slider' is missing the following properties from type 'Slider': slickNext, slickPause, slickPlay, slickPrev, and 8 more.
Overload 2 of 2, '(props: Settings, context?: any): Slider', gave the following error.
Type 'MutableRefObject<typeof Slider | null>' is not assignable to type 'string | ((instance: Slider | null) => void) | RefObject<Slider> | null | undefined'.
Type 'MutableRefObject<typeof Slider | null>' is not assignable to type 'RefObject<Slider>'.
I'm also getting another error when clicking on the button: TypeError: sliderRef.slickPlay is not a function
单击按钮时我还遇到另一个错误: TypeError: sliderRef.slickPlay is not a function
I'm attempting to call the slick methods slickPlay
and slickPause
, however I'm running into type errors.我试图调用光滑的方法slickPlay
和slickPause
,但是我遇到了类型错误。 I've looked at the examples https://github.com/akiran/react-slick/blob/master/examples/AutoPlayMethods.js however I'm not able to achieve the desired result still.我已经查看了示例https://github.com/akiran/react-slick/blob/master/examples/AutoPlayMethods.js但是我仍然无法达到预期的结果。
It confuses me to use these methods for functional components instead of class-based components.将这些方法用于功能组件而不是基于类的组件让我感到困惑。 Adding in the layer of typescript makes it that much more challenging.添加 typescript 层使其更具挑战性。
Thank you in advance.先感谢您。
I'll address the second part first: when using useRef
, you have to refer to .current
to get the actual instance.我将首先解决第二部分:使用useRef
时,您必须引用.current
来获取实际实例。 So, your calls would look like:所以,你的电话看起来像:
sliderRef.current.slickPlay();
Now the first part.现在是第一部分。 This one, I'm willing to believe that this could change depending on which version of Typescript/React/react-slick you're using, but for me, Typescript stops complaining if I just use:这一个,我愿意相信这可能会根据您使用的 Typescript/React/react-slick 版本而改变,但对我来说,如果我只使用 Typescript 就会停止抱怨:
const sliderRef = React.useRef<Slider>(null);
I was able to get this to work by making a check on .current
instead of sliderRef
.我可以通过检查.current
而不是sliderRef
来使它工作。
const sliderElement = sliderRef.current;
if (sliderElement) {
// do stuff
}
This small nuance was able to pass the type errors.这个细微的差别能够传递类型错误。
For the useRef
declaration, this line worked(thanks to help from @jnpdx)对于useRef
声明,这一行有效(感谢@jnpdx 的帮助)
const sliderRef = React.useRef<Slider | null>(null);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.