0Pricing
React Academy · 课时

通过对象 Props 实现命名插槽

通过命名 props 传递 JSX，实现页眉、主体和页脚插槽。

通过对象 Props 实现命名插槽 是 CoddyKit 上的免费 React Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 React Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 React Academy 课程共包含 4 节课。

欢迎

在本课中，您将通过命名属性传递 JSX，实现灵活的命名插槽，从而构建包含页眉、正文和页脚区域的布局组件，而不受固定子元素结构的限制。

子元素属性的局限性

单个 `children` 属性适用于一个内容区域。当组件需要多个彼此独立的内容区域时（例如包含页眉和页脚的卡片），使用携带 JSX 的命名属性是简洁的解决方案。

命名属性插槽

在组件的接口中为每个插槽定义一个属性。父组件将 JSX 传给每个属性，组件则在正确的位置渲染每个插槽。
function Card({ header, body, footer }) {
  return (
    <div className="card">
      <div className="card-header">{header}</div>
      <div className="card-body">{body}</div>
      <div className="card-footer">{footer}</div>
    </div>
  );
}

// Usage
<Card
  header={<h2>Title</h2>}
  body={<p>Content here</p>}
  footer={<button>OK</button>}
/>

可选插槽

只有在属性为真值时才渲染插槽，就可以让插槽变为可选。这样，同一个组件就可以在有页脚或没有页脚的情况下使用。
function Card({ header, children, footer }) {
  return (
    <div>
      {header && <div className="header">{header}</div>}
      <div className="body">{children}</div>
      {footer && <div className="footer">{footer}</div>}
    </div>
  );
}

混用子元素与命名插槽

使用 `children` 表示主要内容区域，使用命名属性表示次要区域。这遵循了一个原则：最常见的使用场景应当最便于使用。
<Dialog
  title="Confirm"
  actions={<><button>Cancel</button><button>OK</button></>}
>
  <p>Are you sure?</p>  {/* children = primary slot */}
</Dialog>

TypeScript：为命名插槽设置类型

将命名插槽属性设置为 `React.ReactNode` 类型，以接受任意 JSX 内容。
interface CardProps {
  header?: React.ReactNode;
  children: React.ReactNode;
  footer?: React.ReactNode;
}

命名插槽与复合组件

命名属性简单且明确。复合组件（例如 ``）对于复杂的组件系列来说使用起来更加方便，但需要借助上下文进行更多设置。请先使用命名属性，必要时再迁移。

将组件作为插槽传递

您也可以将插槽设置为 React 组件类型，而不是 JSX。父组件传入组件引用，布局组件负责渲染它。这样，布局组件就可以控制插槽的渲染时机以及渲染次数。
function Timeline({ renderItem, items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{renderItem(item)}</li>
      ))}
    </ul>
  );
}

<Timeline
  items={data}
  renderItem={item => <EventCard event={item} />}
/>

使用命名插槽组合布局

页面布局组件会广泛使用命名插槽。带有 `sidebar`、`toolbar` 和 `content` 插槽的页面外壳组件，可以让不同页面使用完全不同的各区域内容来组合相同的外壳。

记录命名插槽

命名插槽可以通过 TypeScript 接口或 PropTypes 实现自我说明。使用方可以准确看到哪些插槽可用、哪些是可选的，从而减少对外部文档的需求。

快速检查

对于接受任意 JSX 的命名插槽属性，应使用哪种 TypeScript 类型？

回顾

命名插槽属性让布局组件更加灵活，并且能够自我说明。主要区域使用 children，次要区域使用命名属性，并将它们设置为 React.ReactNode 类型。

接下来

下一课：**使用 cloneElement 克隆并注入属性**——您将使用 React.cloneElement，将隐藏属性从父组件传递给子元素。

常见问题解答

「通过对象 Props 实现命名插槽」课时是免费的吗？

是的 — 「通过对象 Props 实现命名插槽」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 React Academy 课程的其余内容，请升级到 CoddyKit PRO。 React Academy 课程共包含 4 节课。

「通过对象 Props 实现命名插槽」这节课中我会学到什么？

通过命名 props 传递 JSX，实现页眉、主体和页脚插槽。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「通过对象 Props 实现命名插槽」课时需要多长时间？

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

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

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

此课程中的所有课时

  1. props.children 基础
  2. React.Children 工具
  3. 通过对象 Props 实现命名插槽
  4. 使用 cloneElement 克隆并注入 Props
← 返回 React Academy