登录
你以为 Props 只是传参？ 不，它是 React 组件设计的“灵魂系统”
90% 的 React 初学者，都低估了 Props。
他们以为它只是“从父组件往子组件传点数据”。
但真正写过复杂组件、设计过通用组件的人都知道一句话：
Props 决定了一个组件“好不好用”，而不是“能不能用”。
这篇文章，我们不讲 API 清单、不背概念，
而是围绕 Props 系统的 5 个核心能力，一次性讲透 React 组件化的底层逻辑：
- Props 传递
- Props 解构
- 默认值（defaultProps / 默认参数）
- 类型校验（PropTypes）
- children 插槽机制（React 的核武器）
👉 看完你会明白：
React 真正厉害的不是 JSX，而是 Props 设计。
一、Props 的本质：组件的“对外接口”
先抛一个结论：
React 组件 ≈ 一个函数 + 一套 Props 接口
来看一个最简单的组件 👇
function Greeting(props) {
return <h1>Hello, {props.name}</h1>
}
使用时：
<Greeting name="白兰地" />
很多人到这里就停了，但问题是：
❓
name到底是什么？
答案是：
name 不是变量，是组件对外暴露的能力。
Props 本质上是：
- 父组件 👉 子组件的输入
- 组件作者 👉 使用者的约定
二、Props 解构：不是语法糖，而是“设计声明”
对比两种写法 👇
❌ 不推荐
function Greeting(props) {
return <h1>Hello, {props.name}</h1>
}
✅ 推荐
function Greeting({ name }) {
return <h1>Hello, {name}</h1>
}
为什么？
解构不是为了少写字，而是为了表达意图。
当你看到函数签名：
function Greeting({ name, message, showIcon }) {}
你立刻就知道：
- 这个组件“需要什么”
- 组件的“输入边界”在哪里
👉 好的组件，从函数签名就能读懂。
三、Props 默认值：组件“健壮性”的第一步
看这个组件 👇
function Greeting({ name, message }) {
return (
<div>
<h1>Hello, {name}</h1>
<p>{message}</p>
</div>
)
}
如果使用者这么写：
<Greeting name="空瓶" />
会发生什么？
message === undefined
这时候就轮到 默认值 出场了。
方式一：defaultProps（经典）
Greeting.defaultProps = {
message: 'Welcome!'
}
方式二：解构默认值（更推荐）
function Greeting({ name, message = 'Welcome!' }) {}
💡默认值不是兜底，而是组件设计的一部分。
它代表的是：
- “在你不配置的情况下”
- “组件应该表现成什么样”
四、Props 类型校验：组件的“自说明文档”
来看一段很多人忽略、但非常值钱的代码 👇
import PropTypes from 'prop-types'
Greeting.propTypes = {
name: PropTypes.string.isRequired,
message: PropTypes.string,
showIcon: PropTypes.bool,
}
很多人会说：
“这不是可有可无吗？”
但在真实项目里，它解决的是：
- ❌ 参数传错没人发现
- ❌ 新人不知道组件怎么用
- ❌ 组件一多，全靠猜
🔍 PropTypes 的真正价值
不是防 bug，而是“降低理解成本”。
当你看到 propTypes，就等于看到一份说明书：
- 哪些 props 必须传？
- 哪些是可选？
- 类型是什么？
👉 一个没有 propTypes 的通用组件，本质上是“黑盒”。
五、children：React Props 系统的“王炸”
如果只能选一个 Props 机制，我会毫不犹豫选：
🧨 children
来看一个 Card 组件 👇
const Card = ({ children, className = '' }) => {
return (
<div className={`card ${className}`}>
{children}
</div>
)
}
使用时：
<Card className="user-card">
<h2>张三</h2>
<p>高级前端工程师</p>
<button>查看详情</button>
</Card>
这里发生了一件非常重要的事情：
组件不再关心“内容是什么”。
🧠 children 的设计哲学
组件负责“骨架”，使用者负责“填充”。
- Card 只负责：边框、阴影、间距
- children 决定：展示什么内容
这让组件具备了两个特性：
- ✅ 高度复用
- ✅ 永不过期
六、children + Props = 通用组件的终极形态
再看一个更高级的例子：Modal 👇
<Modal HeaderComponent={MyHeader} FooterComponent={MyFooter}>
<p>这是一个弹窗</p>
<p>你可以在这里显示任何 JSX</p>
</Modal>
Modal 的实现：
function Modal({ HeaderComponent, FooterComponent, children }) {
return (
<div>
<HeaderComponent />
{children}
<FooterComponent />
</div>
)
}
这背后是一个非常高级的思想：
Props 不只是数据，也可以是组件。
七、请记住这 5 条 Props 设计铁律
🔥 如果你只能记住一段话，请记住这里
- Props 是组件的“对外接口”，不是随便传的变量
- 解构 Props，是在声明组件的能力边界
- 默认值，决定组件的“基础体验”
- 类型校验，让组件自带说明书
- children，让组件从“可用”变成“好用”
八、写在最后
当你真正理解 Props 之后，你会发现：
- React 不只是 UI 库
- 它在教你如何设计 API
- 如何让别人“用得爽”
Props 写得好不好，决定了一个人 React 水平的上限。
