Frontend Academy · 课时

使用 Context 的复合组件

Q: 「使用 Context 的复合组件」这节课中我会学到什么？

使用 Context 在父组件与指定的子组件之间共享隐式状态，构建类似 和 的 API。 你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用 Context 在父组件与指定的子组件之间共享隐式状态，构建类似和的 API。

使用 Context 的复合组件 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

什么是复合组件

复合组件是一组设计为协同工作、构成一个整体的相关组件，就像 HTML 的 <select> 和 <option> 一样。父组件会与特定的子组件共享隐式状态。

目标：更简洁的 API

您无需使用 <Select options={[...]} value={x} onChange={...} />，而是可以写成 <Select><Option value="a">Apple</Option></Select>。这种结构是声明式的，并且原生适配 JSX。

朴素方法（问题）

通过属性传递状态要求使用者负责连接所有内容。子组件不会自动了解父组件的状态。

// Without compound pattern — verbose:
<Tabs activeIndex={0} onChange={setIndex}>
  <TabList>
    <Tab index={0}>Home</Tab>
    <Tab index={1}>Profile</Tab>
  </TabList>
</Tabs>

使用上下文进行连接

父组件创建包含共享状态的上下文并提供它。子组件使用该上下文，无需显式传递属性。

import { createContext, useContext, useState } from 'react';

const TabsContext = createContext(null);

export function Tabs({ children, defaultIndex = 0 }) {
  const [activeIndex, setActiveIndex] = useState(defaultIndex);
  return (
    <TabsContext.Provider value={{ activeIndex, setActiveIndex }}>
      <div className="tabs">{children}</div>
    </TabsContext.Provider>
  );
}

子组件使用上下文

每个子组件都从上下文中读取数据，无需沿着组件树逐层传递属性。

export function Tab({ index, children }) {
  const { activeIndex, setActiveIndex } = useContext(TabsContext);
  const isActive = activeIndex === index;
  return (
    <button
      className={isActive ? 'active' : ''}
      onClick={() => setActiveIndex(index)}
    >
      {children}
    </button>
  );
}

export function Panel({ index, children }) {
  const { activeIndex } = useContext(TabsContext);
  if (activeIndex !== index) return null;
  return <div className="panel">{children}</div>;
}

使用静态属性提升可发现性

将子组件附加到父组件上，用户就可以通过自动补全发现它们。

Tabs.Tab = Tab;
Tabs.Panel = Panel;

// Usage:
<Tabs>
  <Tabs.Tab index={0}>Home</Tabs.Tab>
  <Tabs.Tab index={1}>Profile</Tabs.Tab>
  <Tabs.Panel index={0}>Home content</Tabs.Panel>
  <Tabs.Panel index={1}>Profile content</Tabs.Panel>
</Tabs>

实际示例：折叠面板

折叠面板小部件包含触发器和面板子组件，它们通过上下文共享打开或关闭状态。

function Disclosure({ children }) {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <DisclosureContext.Provider value={{ isOpen, setIsOpen }}>
      <div>{children}</div>
    </DisclosureContext.Provider>
  );
}

function Trigger({ children }) {
  const { isOpen, setIsOpen } = useContext(DisclosureContext);
  return <button onClick={() => setIsOpen(o => !o)}>{children}</button>;
}

function Panel({ children }) {
  const { isOpen } = useContext(DisclosureContext);
  return isOpen ? <div>{children}</div> : null;
}

将钩子作为公开 API

导出一个自定义钩子，让用户可以在您的组件之上构建自己的组件。

export function useTabs() {
  const ctx = useContext(TabsContext);
  if (!ctx) throw new Error('useTabs must be used inside <Tabs>');
  return ctx;
}

多态复合组件

允许父组件通过 as 属性或 asChild 模式来渲染任意元素（Radix UI 采用的方法）。这样，复合组件就能与任意 JSX 组合使用。

无头复合模式

无头库（Radix、Headless UI）提供不带样式的复合组件，内置无障碍逻辑，您可以根据需要自行设置样式。

常见问题：检查子组件

较早的一种模式会使用 React.Children 检查子组件，这种方式脆弱且不可靠。共享状态时请始终优先使用上下文。

快速检查

在复合组件模式中，子组件如何与父组件通信？

回顾：复合组件

复合组件让相关部分以一个声明式整体协同工作。使用上下文共享状态：父组件放置 Provider，子组件使用 useContext。将子组件作为静态属性附加，以便用户发现。导出自定义钩子作为公开 API。Radix 和 Headless UI 是很好的参考。优先使用上下文，而不是检查 Children。

常见问题解答

「使用 Context 的复合组件」课时是免费的吗？

是的 — 「使用 Context 的复合组件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「使用 Context 的复合组件」这节课中我会学到什么？

使用 Context 在父组件与指定的子组件之间共享隐式状态，构建类似和的 API。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「使用 Context 的复合组件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy