props 与 children
props 是父组件传给子组件的数据（只读），children 是特殊的 props：写在开闭合标签之间的内容。<Card>任意内容</Card> 中，“任意内容”就是 props.children，这是编写通用容器组件（卡片、弹窗、布局）的关键。
组合优于继承：React 里没有“继承组件”的玩法，复用靠把子组件作为 props 传进去（如 props.header、render props），或用自定义 Hook 复用逻辑。
- props.parent → child 单向流动，子组件不能改自己的 props
- children：标签之间开镂空，容器类组件靠它实现 “插槽”
- 复用方式 = 组合（传组件当 props）+ 自定义 Hook，而非类继承
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>props 与 children</title> <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> // 通用卡片：标题、主题色走具名 props，正文镂空给 children function Card({ title, color = '#087ea4', children }) { return ( <div style={{ border: '1px solid ' + color, borderRadius: 10, padding: 14, margin: '8px 0' }}> <h3 style={{ color }}>{title}</h3> <div>{children}</div> </div> ); } function App() { return ( <div style={{ padding: 16 }}> <Card title="基础用法"> <p>children 就是这一段 JSX，子组件想放哪放哪。</p> </Card> <Card title="传任意组件" color="#d29922"> <button>按钮也能传</button> <ul><li>列表</li><li>也行</li></ul> </Card> {/* 还能把组件当属性传进去（具名插槽） */} <Card title="具名插槽" color="#e11d48"> <header slot="extra">这段虽然都在 children 里，但结构由 Card 决定</header> </Card> </div> ); } ReactDOM.createRoot(document.getElementById('root')).render(<App />); </script> </body> </html>
本节要点props 单向只读；children 让组件“开槽”；React 复用靠组合与 Hooks，不靠继承。
