Compound Component Pattern (Tabs)

Senior

Problem Statement

Thiết kế một bộ component `Tabs` cho phép người dùng chuyển đổi giữa các tab. Yêu cầu sử dụng Compound Component Pattern để đảm bảo tính linh hoạt.

Constraints & Edge Cases

•Component phải quản lý trạng thái index đang mở (active index).
•Phải dễ dàng mở rộng để thêm class hoặc style riêng vào từng phần.
•Tránh 'Prop Drilling' từ component cha xuống các con nằm sâu bên trong.

Complexity

Render: O(n) với n là số lượng tab.

tsx

import React, { useState, createContext, useContext } from "react";

const TabsContext = createContext<any>(null);

export const Tabs = ({ children, defaultValue }: any) => {
  const [activeIndex, setActiveIndex] = useState(defaultValue);
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <div className="tabs-container">{children}</div>
    </TabsContext.Provider>
  );
};

export const Tab = ({ index, children }: any) => {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  return (
    <button
      onClick={() => setActiveIndex(index)}
      style={{ fontWeight: activeIndex === index ? "bold" : "normal" }}
    >
      {children}
    </button>
  );
};

export const TabPanel = ({ index, children }: any) => {
  const { activeIndex } = useContext(TabsContext);
  return activeIndex === index ? <div>{children}</div> : null;
};

export const TabList = ({ children }: any) => <div>{children}</div>;
export const TabPanels = ({ children }: any) => <div>{children}</div>;

Common Mistakes

Truyền `activeIndex` xuống từng con thông qua `React.Children.map`.
Không sử dụng Context API khiến việc mở rộng cấu trúc DOM bên trong trở nên khó khăn.