Javascript 请解释在这种情况下排列运算符的用法

我刚开始使用reactjs，在使用react Datacatle时遇到了以下代码段：

class MyTextCell extends React.Component {
  render() {
    const {rowIndex, field, data, ...props} = this.props;
    return (
      <Cell {...props}>
        {data[rowIndex][field]}
      </Cell>
    );
  }
}

并且…props将确保它获取此.props的所有对象，不包括行索引、字段和数据。我说得对吗

所以我的问题是，如果不使用

…道具

，而是使用

…一些东西

来让两个“道具”看起来不同，不是更好吗

在

中…道具实际上包含什么？this.props的所有对象还是除行索引、字段、数据等之外的“剩余”对象

这是获取代码段的链接：

---

1

const{rowIndex，field，data，…props}=this.props

这是一个ES6/2015功能的实施和一个建议的功能：


“解构”（）
“对象rest属性”是目前正在计划中的一项功能（请参阅），该功能通过babel插件
transform object rest spread
启用

因此，为了清楚地解释它，
this.props
对象正在被“分解”为4个新属性，即
rowIndex
，
字段
，
数据
和
props
。
props
参数是“objectrest”的结果，它收集所有附加属性并将它们放入新对象中

因此，你对1号的假设是正确的<代码>…道具

实际上将包含除

行索引

、

字段

和

数据

以外的所有道具。最棒的是，您不需要知道或列出任何“其他”属性，它们将自动绑定到新创建的

props

对象中

如何命名完全取决于您，但我同意“重用”名称道具可能有点令人困惑。以个案为基础。我倾向于给我的名字起不同的名字

2<代码>

这是“JSX扩展属性”语法（）的一个实现

这将获取对象中的所有属性，然后将它们分布在目标JSX节点上

因此，例如，如果您有以下对象的传入道具：

{ rowIndex: 1, field: 'foo', data: 'bar', message: 'hello', name: 'Bob' }

这将导致：

<Cell message="hello" name="bob" />

---

---

当您创建包装组件的高阶组件时，这种方法非常有用，但您不希望将高阶组件特定的道具传递到包装组件中。

2仍然有点混乱，因为在下一行，{data[rowIndex][field]}使用“rowIndex”和“field”。因此，我相信这里的道具可能意味着包含更广泛对象集的道具1。既不是rest参数，也不是解构参数。这是使用rest属性（请参阅：）来分解对象。您发送此消息时，我正在修改我的答案。：）感谢您的提醒。仅供参考，“对象静止属性”不是ES7/ES2016的一部分。注意，#2不是对象rest spread，它是一个JSX spread属性，它是JSX特有的、不相关的，尽管看起来与ECMAScript类似。

<Cell message="hello" name="bob" />