ES6扩展运算符（...）是React中属性透传最简洁方式，可展开对象所有可枚举属性为独立prop；支持组合覆盖、解构排除及安全条件渲染。
在 React 中，ES6 扩展运算符（...）是实现组件属性透传最简洁、最常用的方式。它能把一个对象的所有可枚举属性“展开”成独立的 prop，直接传递给子组件，避免手动罗列每个字段。
基础用法：一次性透传整个 props 对象
当父组件接收了一组 props，并希望原样（或稍作调整）交给子组件时，直接使用 {...this.props} 即可：
- 适用于函数组件：
<child></child> - 适用于类组件：
<child></child> - 等价于把
props里每个键值对都单独写出来，比如title={props.title} author={props.author} date={props.date}
组合使用：覆盖或补充特定属性
扩展运算符可以和其他 prop 并存，同名属性以靠后的为准——后写的会覆盖前面展开的值：
-
<button type="primary" disabled></button>：保留所有传入的 props，但强制设type为"primary"，disabled为false -
<div classname="wrapper"></div>：先写固定 class，再展开其他属性，避免被覆盖
解构 + 展开：排除某些属性后再透传
若需剔除几个特定 prop（如 className、style），可用解构配合剩余属性语法：
const { className, style, ...rest } = props;- 然后用
<div classname="{className}"></div>—— 把className单独处理，其余全透传 - 这种写法常见于高阶组件或封装型 UI 组件（如自定义 input、card 等）
注意边界：别在条件分支里直接展开空对象
扩展运算符要求操作的是对象，且不能在逻辑表达式中裸用：
- ✅ 正确：
{condition && <modal></modal>} - ❌ 错误：
{...condition ? modalProps : {}}（会报错，因三元结果不是对象字面量上下文） - 稳妥写法：
{condition && <modal></modal>}
