你以为 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 设计铁律

🔥 如果你只能记住一段话，请记住这里

1. Props 是组件的"对外接口"，不是随便传的变量
2. 解构 Props，是在声明组件的能力边界
3. 默认值，决定组件的"基础体验"
4. 类型校验，让组件自带说明书
5. children，让组件从"可用"变成"好用"

---

八、写在最后

当你真正理解 Props 之后，你会发现：

• React 不只是 UI 库
• 它在教你如何设计 API
• 如何让别人"用得爽"

Props 写得好不好，决定了一个人 React 水平的上限。