React Academy · 课时

props.children 基础

Q: 「props.children 基础」这节课中我会学到什么？

将 JSX 作为子元素传入，渲染单个或多个子元素，并有条件地渲染子元素。 你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

将 JSX 作为子元素传入，渲染单个或多个子元素，并有条件地渲染子元素。

第 1 / 4 课13 个步骤

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

欢迎

在本课中，您将掌握如何将 JSX 作为子元素传递、渲染单个或多个子元素，以及在 React 组件中有条件地渲染子元素。

children 属性

放在组件开始标签和结束标签之间的任何 JSX，都会自动作为 `props.children` 使用。这是构建包装器组件或布局组件的方式。

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Usage
<Card><p>Hello world</p></Card>

单个与多个子元素

传入单个 child 时，`children` 是一个 React 元素。传入多个子元素时，`children` 是一个数组。行为会根据传入的子元素数量而变化。

<Card>One child</Card>          // children is a string
<Card><p>A</p><p>B</p></Card>  // children is an array

直接渲染子元素

子元素最简单的用法，就是直接在 JSX 中渲染它们。父组件控制布局和样式，使用方控制内容。

function Section({ title, children }) {
  return (
    <section>
      <h2>{title}</h2>
      <div className="content">{children}</div>
    </section>
  );
}

有条件地渲染子元素

在渲染前检查是否传入了子元素。如果没有提供子元素，组件可以显示备用内容。

function Panel({ children }) {
  if (!children) return <p>Nothing to show</p>;
  return <div className="panel">{children}</div>;
}

将子元素作为渲染属性

子元素也可以是一个**函数**（渲染属性模式）。父组件将数据传给它并调用它，而使用方控制渲染方式。这是一种较早期的模式，如今通常会使用自定义钩子来替代它。

function DataLoader({ children }) {
  const data = useFetchData();
  return children(data); // consumer receives data
}

<DataLoader>{data => <ul>{data.map(...)}</ul>}</DataLoader>

将子元素作为属性传递

子元素不一定要使用特殊的 `{children}` 插槽。您可以通过任意属性名称传递 JSX。这是命名插槽的基础。

function Layout({ header, footer, children }) {
  return (
    <div>
      <header>{header}</header>
      <main>{children}</main>
      <footer>{footer}</footer>
    </div>
  );
}

默认子元素

您可以在解构赋值中使用 JavaScript 默认参数语法来提供默认子元素。如果父组件没有传入内容，就会显示默认内容。

function Button({ children = 'Click me' }) {
  return <button>{children}</button>;
}

片段与多个子元素

如果要在不添加包装器 div 的情况下返回多个元素，请使用 `React.Fragment` 或简写形式 `<>...`。对于布局组件来说，这种方式很简洁，因为额外的 DOM 节点可能会破坏 CSS。

function Row({ children }) {
  return <>{children}</>;
}

TypeScript：为子元素设置类型

在 TypeScript 中，使用 `React.ReactNode` 为子元素设置类型——它可以接受元素、字符串、数字、数组、null 和 undefined。

interface Props {
  children: React.ReactNode;
}

function Box({ children }: Props) {
  return <div>{children}</div>;
}

快速检查

当您在组件标签之间传入多个 JSX 元素时，props.children 的类型是什么？

在交互式课程中回答

回顾

`props.children` 保存着标签之间传入的任何 JSX。单个子元素是一个元素，多个子元素是一个数组。对于可选子元素，请使用条件检查；对于命名插槽，请使用命名属性。

接下来

下一课：**React.Children 工具**——您将使用 React.Children.map、count 和 toArray，无论子元素的类型或数量如何，都能安全地处理它们。

免费开始

用 AI 导师学习 React — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 88
课程: 324

免费开始学习查看完整课程

常见问题解答

「props.children 基础」课时是免费的吗？

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

「props.children 基础」这节课中我会学到什么？

将 JSX 作为子元素传入，渲染单个或多个子元素，并有条件地渲染子元素。你通过在浏览器中直接运行的动手代码来练习 React Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 React Academy 需要有经验吗？

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

「props.children 基础」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 React Academy