【问题标题】：How to pass several props in spread operator in react如何在反应中传递传播运算符中的几个道具
【发布时间】：2018-03-24 21:16:39
【问题描述】：

我有以下几点：

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

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

我在 react docs 中读到，使用扩展运算符可以做到这一点：

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

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

这行得通：

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

但我不确定它是否正确...... 这也有效：

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

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

但是，这不起作用：

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

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

我在哪里弄错了？

【问题讨论】：

标签： reactjs

【解决方案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} 是一个对象。嗯，它实际上是一个“返回”对象类型值的表达式，但它是一样的。它工作正常。

最后一种情况：

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

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

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

如您所见，在...objA 的字符A 之后，JSX 只希望找到}。但它发现了一个 ,，这是一个错误（Unexpected token）。

用什么？

考虑所有三种有效的形式：

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

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

【讨论】：

谢谢！这是迄今为止我在 Stack Overflow 中收到的最好的答案！
什么时候可以使用 ` { ...{ attributes } }` 但这不起作用；t ` { ...attributes }`。 React 可能很奇怪，伙计。

【解决方案2】：

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

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

在这个例子中你有两个props，第一个是with Rest参数。

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

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

错误：rest参数后的参数

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

【讨论】：

【解决方案3】：

如果你有以下情况

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

要将这些作为道具传递，您只需这样做

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

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

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

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

用额外的大括号传递它，如下所示 -

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

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

传递更多的道具：

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

【讨论】：