Reactjs 如何在react中通过spread操作符中的几个道具

我有以下资料：

let objA = {varA,varB};
let objB = {varC, varD};

我想将varA、varB、varC、varD传递给我的组件，但不是逐个传递，因为objA和objB中的变量数量应该是未知的

我在react文档中读到，使用spread operator可以实现这一点：

let bothObjects = {...arrA, ...arrB};
<Component {...bothObjects} />

让bothObjects={…arrA，…arrB}；

但是，如果没有第三个对象，有可能吗

这项工作：

<Component {...objA} {...objB} />

但我不确定它是否正确。。。 这也适用于：

<Component {...{...objA,...objB}} />

但它看起来很有趣，我不完全理解这一点

但是，这不起作用：

<Component {...objA, ...objB} />

我不知道为什么。。。因为它在我初始化上面的“bothObjects”时起作用。。。在我看来，这也是一种直观的正确方法

---

我错在哪里了

Rest参数应该是，您要传递两个。您应该将两者划分为单独的

道具

，如您的工作示例中所示：

<Component {...objA} {...objB} />

当我输入

a

参数时，它给出了错误：

错误：rest参数之后的参数

---

EDIT:And@Omar是正确的，在这种情况下，不需要使用Rest参数，因为这两个参数都是简单对象

let objA={varA，varB}
让objB={varC，varD}

要将这些作为道具传递，您只需执行以下操作


没有理由使用
…
语法

只需使用
this.props.objA
或
this.props.objB
在组件中访问它们即可。然后，您可以在传递到的各个组件中对这些对象执行任何操作。
首先查看JSX。当您这样做时（场景1）：



something
通常是一个JavaScript表达式

使用排列运算符时，如（场景2）：



然后
某物
应该是JavaScript对象

你的案子
考虑到
objA
和
objB
是两个JavaScript对象，您可以像上面的场景2那样使用它们：



他们应该像预期的那样工作

当您这样做时：

让bothObjects={…objA，…arrB}；

同样，由于
bothObjects
都是对象，因此也可以工作。只有一个对象碰巧是基于
objA
和
objB
构建的

另一种情况是：



可能看起来很奇怪，但是工作得很完美。从上面的场景2中可以看到，JSX期望（在
{…something}
中）something
是一个对象。而
{…objA，…objB}
是一个对象。实际上，它是一个“返回”对象类型值的表达式，但它是相同的。它很好用

最后一个案例：



因为expresion
objA，…objB
不是JavaScript对象，所以不起作用。它实际上毫无意义，这是一个语法错误。请参阅错误消息：

VM2296 babel.js:17994 Uncaught SyntaxError: Babel script: Unexpected token, expected }
  30 | 
  31 |       <Bob
> 32 |         {...objA, ...objB}
     |                 ^
说哪一个更好只是品味的问题。选择您认为更可读的内容。
这是我的用例。从定义的对象更改某些道具：

<Component someProp={{...{...someObject, ...{someValue: false}}}} />

用下面这样的大括号传递-

其中this.closeModal是我在react类组件中的方法

{…{…this.props，closeModal:this.closeModal}}

传递更多道具：

{...{ ...
    this.props,
    method1: param => this.method1(param),
    method2: _ => this.method2()
}}

非常感谢。这是迄今为止我在堆栈溢出中收到的最好的答案！当它工作时`{…{attributes}}}`但是它不工作；t`{……属性}`。反应可能很奇怪，伙计。
{...{ ...
    this.props,
    method1: param => this.method1(param),
    method2: _ => this.method2()
}}