Yêu cầu thg 3 10, 2022 10:40 SA 365 0 1
  • 365 0 1
+1

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

Chia sẻ
  • 365 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 CÂU TRẢ LỜI


Đã trả lời thg 3 10, 2022 6:00 CH
Đã được chấp nhận
+3

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();
     }
 }}
...
Chia sẻ
thg 3 11, 2022 4:33 SA

Mình cảm ơn ạ

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí