我有以下内容：
let objA = {varA,varB};
let objB = {varC, varD};
我想将VARA，VARB，VARC，VARD传递给我的组件，而不是一个一个，因为OBJA和OBJB内部的变量数量应该是未知的。
我已经在react文档中读到，这是可以通过传播操作员来的：
let bothObjects = {...arrA, ...arrB};
<Component {...bothObjects} />
但是可以没有第三个对象吗？
这有效：
<Component {...objA} {...objB} />
，但我不确定这是正确的...这也有效：
<Component {...{...objA,...objB}} />
，但看起来很有趣，我不完全理解这一点。
但是，不起作用：
<Component {...objA, ...objB} />
，我不确定为什么...因为我在上面初始化" botobjects"时起作用...它也看起来像我的正确方法。
我在哪里误会？
首先在JSX中进行A外观。当您执行时(方案1 (：
<Component myProp={something} />
something通常是JavaScript表达式。
当您使用传播操作员时，例如(方案2 (：
<Component {...something} />
然后something应该是 JavaScript对象。
您的案件
考虑objA和objB是两个JavaScript对象，您可以使用它们，例如方案2 上面：
<Component {...objA} {...objB} />
，他们应该按预期工作工作。
当您这样做：
let bothObjects = {...objA, ...arrB};
<Component {...bothObjects} />
再次，它 works 因为bothObjects太过对象。只是一个基于objA和objB构建的对象。
另一种情况：
<Component {...{...objA,...objB}} />
看起来很奇怪，但是工作。请参阅上面的方案2 ，JSX期望(在{...something}中(something是一个对象。和{...objA,...objB} 是对象。好吧，这实际上是"返回"对象类型的值的表达式，但相同。它可以正常工作。
最后一个情况：
<Component {...objA, ...objB} />
do 不起作用，因为Expresion objA, ...objB不是JavaScript对象。它实际上没有任何意义，这是语法错误。请参阅错误消息：
vm2296 babel.js：17994 uck offult syntaxerror：babel脚本：意外令牌，预期} > 30 | 31 |＆lt;鲍勃＆gt;32 |{... obja，... objb} |^您可以看到，在...objA的char A之后，JSX刚刚期望找到}。但是它找到了一个错误的,(意外的令牌(。
使用什么？
考虑有效的所有三种形式：
let bothObjects = {...objA, ...arrB};
<Component {...bothObjects} />
<Component {...objA} {...objB} />
<Component {...{...objA,...objB}} />
说哪个更好只是一个品味问题。选择任何您认为更可读。
rest参数应该是函数的最后一个命名参数，您要通过两个。您应该将两者分为单独的props，例如在工作示例中：
<Component {...objA} {...objB} />
在此示例中，您有两个 props，带有ret的参数是第一个。
function sum(...theArgs, q) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}`
当我放置a参数时，它给了我错误：
错误：休息参数之后的参数
编辑：@Omar是对的，在这种情况下，无需使用REST参数，因为这两个都是简单的对象
如果您有以下
let objA = {varA,varB}; let objB = {varC, varD};
将这些作为道具传递，您只是做
<Component objA={objA} objB={objB} />
没有理由使用...语法。
只需在this.props.objA或this.props.objB的组件中添加它们即可。然后，您可以在将其传递给的各个组件中使用这些对象进行任何操作。
这是我的用例。从定义的对象更改一些道具：
<Component someProp={{...{...someObject, ...{someValue: false}}}} />
将其与下面的额外牙套传递 -
其中this.closemodal是我在React类组件中的方法。
{...{ ...this.props, closeModal: this.closeModal }}
传递更多道具：
{...{ ...
this.props,
method1: param => this.method1(param),
method2: _ => this.method2()
}}