javascript - 请解释在这种情况下使用扩展运算符

Question

我刚开始使用 reactjs，在处理 react databatle 时遇到了这个片段：

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

我的问题如下：

1. const {rowIndex, field, data, ...props} = this.props;

据我了解，这可以解释为

rowIndex= this.props.rowIndex
 field= this.props.field

并且 ...props 将确保它获取 this.props 的所有对象，不包括 rowIndex、字段和数据。我对么？

所以我的问题是，如果不是...props说，...somethingElse会被用来使两个“道具”看起来不同，这不是更好吗？

2. ...props实际上<Cell {...props}>包含什么？this.props 的所有对象还是除 rowIndex、字段、数据等之外的“剩余”对象？

这是获取片段的链接： https ://facebook.github.io/fixed-data-table/getting-started.html

Answer 1

1.const {rowIndex, field, data, ...props} = this.props;

这是 ES6/2015 特性和提议特性的实现：

• “解构”（http://es6-features.org/#ObjectMatchingShorthandNotation）
• “对象休息属性”目前正在提议中的一项功能（请参阅https://github.com/sebmarkbage/ecmascript-rest-spread），该功能正在通过 babel 插件启用transform-object-rest-spread。

所以为了解释清楚，this.props对象被“解构”为 4 个新属性，即rowIndex、field、data和props。参数是“对象休息”的props结果，它收集所有附加属性并将它们放入一个新对象中。

因此，您对没有 1 的假设是正确的。 确实将包含除,和....props之外的所有道具。这样做的好处是您不需要知道或列出任何“其他”属性，它们将自动绑定到新创建的对象中。rowIndexfielddataprops

如何命名完全取决于您，但我同意“重用”名称道具可能会有点混乱。根据具体情况进行处理。我倾向于以不同的方式命名我的。

2.<Cell {...props}>

这是“JSX 传播属性”语法（https://facebook.github.io/react/docs/jsx-spread.html）的实现。

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

因此，例如，如果您有传入的 props 对象：

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

这将导致：

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

---

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