您的案例

Question

我有以下内容：

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

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

我在反应文档中读到这可以通过扩展运算符实现：

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

但是没有第三个对象可以吗？

这有效：

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

但我不确定这是对的...... 这也有效：

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

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

然而，不起作用：

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

而且我不确定为什么......因为它在我上面初始化'bothObjects'时起作用了......它也让我觉得这是直观地做到这一点的正确方法。

我错在哪里？

Answer 1

首先看看JSX。当你这样做时（方案1 ）：

<Component myProp={something} />

something通常是JavaScript表达式。

使用点差运算符时，如（方案2 ）：

<Component {...something} />

然后something应该是 JavaScript对象。

您的案例

考虑objA和objB是两个JavaScript对象，您可以像上面的方案2 一样使用它们：

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

他们应该按照预期工作。

当你这样做时：

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

同样，工作，因为bothObjects也是一个对象。只有一个对象恰好是基于objA和objB构建的。

另一种情况：

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

可能看起来很奇怪，但可以完美地运作。请参阅上面的方案2 ，JSX期望（在{...something}中）something是一个对象。 {...objA,...objB} 是一个对象。嗯，它实际上是一个表达＆＃34;返回＆＃34;对象类型的值，但它是相同的。它工作正常。

最后一个案例：

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

不是否有效，因为表达式objA, ...objB不是JavaScript对象。它实际上没有任何意义，这是一个语法错误。请参阅错误消息：

VM2296 babel.js:17994 Uncaught SyntaxError: Babel script: Unexpected token, expected }
  30 | 
  31 |       <Bob
> 32 |         {...objA, ...objB}
     |                 ^

正如您所看到的，在A的char ...objA之后，JSX只希望找到}。但它发现,是一个错误（意外的令牌）。

使用什么？

考虑所有三种形式：

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

说哪一个更好只是一个品味问题。选择你认为更具可读性的内容。

Answer 2

休息参数应该是last named argument of a function，你要传递两个。您应该将它们分成单独的props，就像在您的工作示例中一样：

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

在此示例中，您有两个props，其中Rest参数是第一个。

function sum(...theArgs, q) {
 return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}`

当我输入a参数时，它会给我错误：

错误：休息参数
后的参数

编辑：@Omar是对的，在这种情况下，不需要使用Rest参数，因为两者都是简单的对象

Answer 3

如果您有以下

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

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

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

没有理由使用...语法。

只需使用this.props.objA或this.props.objB在组件中访问它们即可。然后，您可以在传递给它的相应组件中对这些对象执行任何操作。

Answer 4

这是我的用例。从已定义的对象更改一些道具：

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

Answer 5

通过下面的大括号将其传递-

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

{...{ ...this.props, closeModal: this.closeModal }}

传递更多道具：

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

如何在传播运营商中传递几个道具作出反应

5 个答案:

您的案例

使用什么？