children 与复合组件模式

import { type ReactNode } from "react";

// 使用方：标签体里塞了两个元素
<Card>
  <h3>月度账单</h3>
  <p>共 42 笔支出</p>
</Card>

// Card 内部：children 就是个普通 prop，类型 ReactNode
function Card({ children }: { children: ReactNode }) {
  return <div className="card">{children}</div>;
}

createElement(Card, null,
  createElement("h3", null, "月度账单"),
  createElement("p", null, "共 42 笔支出")
);
// 这两个「元素对象」被打包，塞进 props.children 传给 Card

import { type ReactNode } from "react";

interface ArticleCardProps {
  title: ReactNode;    // 头部插槽：注意类型是 ReactNode，不是 string
  footer?: ReactNode;  // 底部插槽：可选
  children: ReactNode; // 正文插槽：约定俗成的名字
}

function ArticleCard({ title, footer, children }: ArticleCardProps) {
  return (
    <article className="card">
      <header>{title}</header>
      <div className="body">{children}</div>
      {footer && <footer>{footer}</footer>}
    </article>
  );
}

// 使用方：传进去的是 JSX 对象，不是字符串——插槽是「活的」
<ArticleCard
  title={<h3>{post.title}</h3>}
  footer={<button onClick={like}>点赞</button>}
>
  <p>{post.body}</p>
</ArticleCard>

const [tab, setTab] = useState("orders");

<Tabs active={tab} onChange={setTab}>
  <Tabs.Item label="订单">订单列表……</Tabs.Item>
  <Tabs.Item label="商品">商品列表……</Tabs.Item>
</Tabs>

<TabItem label="订单" index={0}
  active={tab === "orders"} onClick={() => setTab("orders")}>
  订单列表……
</TabItem>
// 每个 Item 都要重复这一整套；插一个新 Tab，后面的 index 全要手改

import {
  createContext, useContext, useState,
  type ReactNode,
} from "react";

// 1. 内部通道：不导出，是 Tabs 和 Item 的「私房话」
interface TabsContextValue {
  active: string;
  setActive: (key: string) => void;
}
const TabsContext = createContext<TabsContextValue | null>(null);

// 2. Item：不接收任何状态 props，激活态从 Context 拿
function TabItem({ label, children }: { label: string; children: ReactNode }) {
  const ctx = useContext(TabsContext);
  // 没包在 Tabs 里就明确报错——兜住使用方的误用
  if (!ctx) throw new Error("Tabs.Item 必须用在 Tabs 内部");

  const isActive = ctx.active === label;
  return (
    <>
      <button
        className={isActive ? "tab active" : "tab"}
        onClick={() => ctx.setActive(label)}
      >
        {label}
      </button>
      {isActive && <div className="panel">{children}</div>}
    </>
  );
}

// 3. Tabs：唯一持状态的人，通过 Provider 下发
// （初始为空 = 都不选；想默认选中，加 defaultActive prop 即可）
function Tabs({ children }: { children: ReactNode }) {
  const [active, setActive] = useState("");
  return (
    <TabsContext.Provider value={{ active, setActive }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

// 4. 静态挂载：让 <Tabs.Item /> 成立，TS 自动推断出完整类型
export default Object.assign(Tabs, { Item: TabItem });

<Tabs>
  <Tabs.Item label="订单">订单列表</Tabs.Item>
  <Tabs.Item label="商品">商品列表</Tabs.Item>
</Tabs>

type TabsComponent = typeof Tabs & { Item: typeof TabItem };
const TabsWithItem = Tabs as TabsComponent;
TabsWithItem.Item = TabItem;
export default TabsWithItem;