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

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期望(in {...something})something是一个对象.并且{...objA,...objB} 是一个对象.好吧,它实际上是一个"返回"对象类型值的表达式,但它是相同的.它工作正常.

最后一个案例:

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

难道没有工作,因为expresion objA, ...objB不是一个JavaScript对象.它实际上没有任何意义,这是一个语法错误.请参阅错误消息:

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

正如你所看到的,一个char之后A的...objA,只是JSX有望找到}.但它发现了,一个错误(意外的令牌).

用什么？

考虑所有三种形式:

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

说哪一个更好只是一个品味问题.选择你认为更具可读性的东西.

Answer 2

其余参数应该是函数的最后一个参数，您要传递两个参数。您应该将两者分成单独的props，例如在您的工作示例中：

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

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

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

当我放入a参数时，它给了我错误：

错误：剩余参数之后的参数

编辑：@Omar是正确的，在这种情况下，无需使用Rest参数，因为它们都是简单的对象