Asked thg 3 10, 10:40 SA 173 0 1
  • 173 0 1
+1

Antd Carousel - sử dụng useRef với typescript

Share
  • 173 0 1

Em đang sử dụng thư viện Ant Design với TypeScript. Em muốn dùng method của Carousel nhưng lại bị lỗi Esline và Build Product ạ. Mọi người giúp em với.

image.png

1 ANSWERS


Answered thg 3 10, 6:00 CH
Accepted
+2

Bạn phải pass CarouselRef vào useRef để biến slider nhận type, ngoài ra slider.current có thể null nên cần check null trước khi .next().

Cách 1: Dùng non-null assertion để nói dối slider.current là luôn luôn non-null. Ngắn gọn nhưng cẩn thận khi dùng, bởi có thể 1 lý do nào đó slider bị destroy, unmount,...

import { CarouselRef } from "antd/lib/carousel";
const slider = useRef<CarouselRef>(null!);

Cách 2: Cần check null trước khi dùng

import { CarouselRef } from "antd/lib/carousel";
const slider = useRef<CarouselRef>(null);
...
 onClick={() => {
     if (slider.current) {
         slider.current.next();
     }
 }}
...
Share
thg 3 11, 4:33 SA

Mình cảm ơn ạ

0
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.