WHAT - React 组件的 props.children 属性

在 React 中，children 是一个非常重要且特殊的 内置属性，它表示组件标签之间的嵌套内容。

一、什么是 children

举个例子：

const MyCard = ({ children: React.ReactNode }) => {
  return <div className="card">
    <div>title</div>
    {children}
  </div>;
};

<MyCard>
  <p>这是卡片内容</p>
</MyCard>

在这个例子中：

• <p>这是卡片内容</p> 就是传给 MyCard 的 children
• MyCard 组件可以通过 props.children 访问到它

二、基本用法

const Wrapper = ({ children }: { children: React.ReactNode }) => {
  return <div className="wrapper">{children}</div>;
};

// 使用
<Wrapper>
  <h1>Hello</h1>
  <p>World</p>
</Wrapper>

在 Wrapper 中，children 就是一个 ReactNode 类型的元素数组。

三、类型定义（TypeScript）

常用类型写法：

类型	描述
React.ReactNode	最常用，支持所有可渲染内容（JSX、字符串、null、数组等）
React.ReactElement	更严格，只允许一个有效的 React 元素
ReactNode[]	明确是多个节点（不推荐，ReactNode 已包含）

type Props = {
  children: React.ReactNode;
};

四、一些高级用法

1. 条件渲染 children

const ConditionalBox = ({ children, visible }: { children: React.ReactNode; visible: boolean }) => {
  return visible ? <div>{children}</div> : null;
};

2. 多个 children 插槽（命名插槽）

const Layout = ({ header, content }: { header: React.ReactNode; content: React.ReactNode }) => (
  <div>
    <div>{header}</div>
    <main>{content}</main>
  </div>
);

<Layout 
  header={<h1>头部</h1>}
  content={<p>正文内容</p>}
/>

五、children 的优势

• ✅ 灵活嵌套
• ✅ 适合做布局容器组件、UI 包裹组件
• ✅ 组合式组件（如 Card, Modal, Tabs）几乎都依赖 children

总结

点	内容
定义	children 是组件内部嵌套的内容
类型	React.ReactNode 最常用
用途	实现通用组件、插槽功能
特点	灵活、结构清晰、提升复用性