---
title: "Rail danh mục React cho thương mại điện tử"
description: "Rail danh mục ngang trong React: cuộn gốc, mũi tên vô hiệu hóa ở các cạnh, khả năng hiển thị theo từng item cho lazy image và phân tích. Demo và mã nguồn."
canonical: "https://react-horizontal-scrolling-menu.dev/vi/category-rail"
image: "https://react-horizontal-scrolling-menu.dev/og.png"
---

# Một rail danh mục cho cửa hàng của bạn, trong React

Rail danh mục — dải các bộ phận có thể chạm phía trên lưới cửa hàng — là các vùng chứa cuộn có lưu lượng cao nhất trong thương mại điện tử, và chúng là menu, không phải carousel: mỗi ô là một liên kết, không có gì snap, và một nửa ô hé lộ ở cạnh chính là thứ mời gọi người dùng cuộn.

TTokyo

OOslo

LLima

CCairo

SSydney

QQuito

SSeoul

PPorto

DDenver

HHanoi

Kéo rail hoặc dùng mũi tên — chúng vô hiệu hóa ở các đầu thật sự của dải.

[Chỉnh sửa ví dụ này trực tiếp trong Storybook](https://asmyshlyaev177.github.io/react-horizontal-scrolling-menu/?path=/story/examples-simple--simple)

## Tại sao cuộn gốc thắng thế trên một trang cửa hàng

Rail cửa hàng nằm ở phần trên cùng của trang, nơi bạn tranh giành từng điểm Lighthouse. Một engine carousel cung cấp hàng chục kilobyte mô phỏng cử chỉ để làm điều mà trình duyệt vốn làm sẵn; thư viện này chỉ ≈5.7 kB min+gzip và để việc cuộn cho nền tảng, vì vậy không có hiện tượng giật khi hydrate — rail cuộn được trước khi JavaScript của bạn tải xong, điều đó cũng có nghĩa là nó hoạt động trong HTML được render phía server mà crawler của bạn nhìn thấy. Trang này tự nó là bằng chứng render phía server: demo ở trên vẫn cuộn được khi JavaScript bị tắt.

[Trang so sánh](https://react-horizontal-scrolling-menu.dev/vi/compare.md) có bảng đầy đủ đối chiếu với Swiper, Embla, keen-slider và react-slick.

## Theo dõi khả năng hiển thị là một tính năng của trang cửa hàng

Khả năng hiển thị theo từng item nghe như một chi tiết triển khai cho đến khi bạn ánh xạ nó vào việc trưng bày hàng hóa:

-   **Ảnh lazy** — render một ô placeholder cho đến khi `useIsVisible` báo nó đã lên màn hình.
-   **Phân tích impression** — `getVisible()` (hoạt động trực tiếp trong [demo hero](https://react-horizontal-scrolling-menu.dev/vi.md) trên trang chủ) cho bạn biết chính xác danh mục nào đã được xem, không chỉ là rail đã render.
-   **Mũi tên nhận biết cạnh** — vô hiệu hóa hoặc ẩn ở các đầu thật sự, kể cả sau khi danh mục tải bất đồng bộ, như trong [ví dụ thêm item](https://react-horizontal-scrolling-menu.dev/vi/examples/add-items.md).

## Điều chỉnh nó theo hệ thống thiết kế của bạn

Các ô là component của bạn — thẻ ảnh, hình tròn, pill văn bản — mỗi cái mang một `itemId`. Chiều cao và chiều rộng đến từ CSS của bạn; menu không áp đặt kích thước nào. Cuộn từng item một như một slider sản phẩm với [one-item-scroll](https://react-horizontal-scrolling-menu.dev/vi/examples/one-item-scroll.md), hiển thị một [chỉ báo tiến trình](https://react-horizontal-scrolling-menu.dev/vi/examples/progress.md) cuộn, hoặc triển khai RTL cho cửa hàng tiếng Ả Rập và Do Thái với [ví dụ RTL](https://react-horizontal-scrolling-menu.dev/vi/examples/rtl.md) — rail là sự kết hợp, không phải cấu hình.

## Mẫu hình, tối giản

Các ô có `itemId`, mũi tên đến từ các hook hiển thị — toàn bộ rail chưa đến bốn mươi dòng.

CategoryRail.tsx

```
function CategoryRail({ categories }: { categories: Category[] }) {
  return (
    <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
      {categories.map((category) => (
        <CategoryTile itemId={category.id} key={category.id} {...category} />
      ))}
    </ScrollMenu>
  );
}

function CategoryTile({ itemId, name, image }: CategoryTileProps) {
  // Lazy images for free: placeholders until the tile is on screen.
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const isVisible = visibility.useIsVisible(itemId, false);
  return (
    <a href={`/category/${itemId}`} className="rail-tile">
      {isVisible ? <img src={image} alt="" /> : <div className="ph" />}
      <span>{name}</span>
    </a>
  );
}

function LeftArrow() {
  const visibility = React.useContext<publicApiType>(VisibilityContext);
  const atStart = visibility.useLeftArrowVisible();
  return (
    <button disabled={atStart} onClick={() => visibility.scrollPrev()}>
      ←
    </button>
  );
}
```

## Hoặc cài đặt nó như một component shadcn

Registry item cơ bản [scroll-menu](https://react-horizontal-scrolling-menu.dev/r/scroll-menu.json) chính là rail này — mũi tên được style theo shadcn, kéo để cuộn, thanh cuộn ẩn — được cài vào `components/ui/` của bạn và style theo token của bạn:

shadcn

```
npx shadcn@latest add https://react-horizontal-scrolling-menu.dev/r/scroll-menu.json
```

## Các ví dụ liên quan

-   [Bắt đầuMenu tối giản: các mục, hai mũi tên, khả năng hiển thị sẵn sàng.](https://react-horizontal-scrolling-menu.dev/vi/examples/simple.md)
-   [Cuộn từng mục mộtCác mũi tên tiến một mục thay vì cả trang.](https://react-horizontal-scrolling-menu.dev/vi/examples/one-item-scroll.md)
-   [Chỉ báo tiến độ cuộnMột thanh tiến độ chạy theo mục nào đang hiển thị.](https://react-horizontal-scrolling-menu.dev/vi/examples/progress.md)

[Tất cả 21 ví dụ](https://react-horizontal-scrolling-menu.dev/vi/examples.md)

---

More examples: <https://react-horizontal-scrolling-menu.dev/examples.md>
Library summary for LLMs: <https://react-horizontal-scrolling-menu.dev/llms.txt>