Default Props 默认属性

最后更新：2026-10-28

父组件没传某个 prop 时其值为 undefined，界面可能出现空白或报错。用解构默认值（或 ??）为可选 prop 提供兜底，能让组件在缺参时依然表现合理、接口更友好。

ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。

📝 语法

function Avatar({ name = '匿名', size = 40 }) {
//                      ↑ 解构默认值：未传该 prop 时生效
  ...
}

解构默认值	在参数解构中用 = 给 prop 兜底；仅当值为 undefined 时生效，传 0、'' 等值仍按原样使用。

返回值：无返回值，作为编码约定/心智模型使用。

示例可直接运行：展开后自动渲染，编辑代码即时生效。

输出结果：

三行头像：第一行是大号「小明」；第二行「小红」没传 size，走了默认中号；第三行什么都没传，显示默认名「匿名用户」和默认中号头像。

💡 提示 推荐用解构默认值代替已废弃的 static defaultProps，写法更集中、类型推导更友好。

ℹ️ 说明 注意 || 会把 0、'' 也当成「没传」；可选值可能是假值时用 ?? 更安全。

⚠️ 注意 必填 prop 不要设默认值：用 TypeScript 的 required 标注或在开发期给出明确警告更好。

更多案例整理中，敬请期待。

Q defaultProps 还能用吗？

A 函数组件上已标记废弃，React 19 起不再支持；请改用参数解构默认值，语义相同且更直观。

Q 怎么给 props 设置默认值？

A 最常用解构默认值 function C({ size = 40 })；也可以在函数体里 const size = props.size ?? 40。

Q || 和 ?? 设置默认值有什么区别？

A || 遇到 0、''、false 也用默认值；?? 只在 null 或 undefined 时才用默认值。可选数值、字符串建议用 ??。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。