将所有props以对象结合扩展运算符传递是否为不良实践？

这种{...{ key: val, ... }}的写法完全是合法的JSX语法，和你平时用的key={val}写法转译后的JavaScript代码完全一致，不存在功能上的区别。下面针对你的疑问逐一解答：

为啥这种写法少见？ #

• 大部分日常业务开发场景里，props都是零散、独立的，直接写key={val}更直观，不需要额外套一层对象字面量和展开运算符，所以大家更习惯常规写法。
• 这种写法的核心优势在于批量处理动态生成的props，比如TanStack Table的示例中，header.id、header.colSpan、header.getSize()这些值都来自同一个header对象，把它们打包成一个对象再展开，能避免重复写header.xxx，让代码更整洁。这种场景多出现于组件库、复杂表格/表单组件的封装中，普通业务开发里遇到的不多，所以你平时见得少。

这属于不良实践吗？ #

完全不是，这是符合JSX规范的写法，但要根据场景合理使用：

• ✅ 适合场景：当多个props都来自同一个数据源（比如某个状态对象、接口返回的数据、组件实例的属性），把它们整合为一个对象再展开，能减少重复代码，提升可读性和维护性。比如TanStack Table的例子，把和header相关的props打包后展开，逻辑更集中。
• ❌ 不适合场景：如果props是零散的、来自不同来源，强行用这种写法会增加不必要的嵌套，反而降低可读性。比如：
  别扭的写法：

  <div {...{ style: { marginLeft: '1rem' }, id: myIdConst }} />
  

  更直观的常规写法：

  <div style={{ marginLeft: '1rem' }} id={myIdConst} />
  

另外补充一点：如果是列表渲染中的key属性，虽然可以放在展开的对象里，但单独写出来会更显眼，避免不小心遗漏（毕竟React对key的要求比较严格），这也是很多人习惯单独写key的原因之一。

内容的提问来源于stack exchange，提问作者Beto Freitas