Trung BìnhReact iconReact

Compound component pattern. Tại sao hữu ích? Implement example?

Compound component là pattern trong đó component cha quản lý state nội bộ và chia sẻ cho các component con thông qua Context, tạo nên một nhóm component hoạt động cùng nhau.

Ví dụ: <Tabs> là cha quản lý tab đang active, <Tab> và <TabPanel> là con truy cập state qua context để hiển thị đúng nội dung. Lợi ích lớn nhất là API linh hoạt — người dùng component có thể sắp xếp, thêm bớt component con tùy ý mà không cần truyền hàng loạt props phức tạp (tránh prop explosion). Pattern này phổ biến trong các thư viện UI như Radix UI, Headless UI, dùng kết hợp React.cloneElement hoặc Context.

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React