React中如何用扩展运算符传多个Props？无需第三方对象可行吗？

当然可以这么做！你写的 <Component {...objA} {...objB} /> 完全是正确且符合React规范的写法，而且这是日常开发里很常用的技巧。

为什么这个写法可行？ #

React的JSX扩展运算符支持连续展开多个对象，它的逻辑和你在对象字面量里展开多个对象是一致的：

• 所有来自objA和objB的属性都会被合并到组件的props中
• 如果两个对象存在同名属性，后面的对象（也就是objB）里的属性值会覆盖前面的（objA里的），这和{...objA, ...objB}的合并规则完全一样

举个实际的例子：

const objA = { varA: 1, varB: 2 };
const objB = { varB: 3, varC: 4 };

// 这两种方式传递的props是完全相同的
<Component {...objA} {...objB} />
// 等价于
const bothObjects = {...objA, ...objB};
<Component {...bothObjects} />

最终组件收到的props都是 { varA: 1, varB: 3, varC: 4 }

这种写法的优势 #

相比创建中间对象bothObjects，直接在JSX里连续展开两个对象：

• 少了一个额外的变量声明，代码更简洁清爽
• 不需要担心中间变量的命名问题
• 完全适配你提到的“objA和objB内的变量数量未知”的场景，不管里面有多少属性，都会被自动传递给组件

放心用就好，这种写法是React官方认可的，很多成熟的React项目都在使用这种方式来批量传递props~

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