在 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 最常用
用途	實現通用組件、插槽功能
特點	靈活、結構清晰、提升復用性