reactjs - 如何在 react 中传递传播运算符中的多个 Prop

Question

我有以下内容:

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} />

我不知道为什么...因为当我初始化上面的“bothObjects”时它起作用了...在我看来，它也是直观地执行此操作的正确方法。

我哪里错了？

Answer 1

首先看一下 JSX。当您这样做时(场景 1):

<Component myProp={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} 是一个对象。嗯，它实际上是一个“返回”对象类型值的表达式，但它是相同的。效果很好。

最后一个案例:

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

不起作用，因为表达式 objA, ...objB 不是 JavaScript 对象。它实际上没有任何意义，它是一个语法错误。查看错误信息:

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

As you can see, after the char A of ...objA, JSX just expected to find the }. But it found a , which is an error (Unexpected token).

What to use?

Considering all three forms that work:

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

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