请解释在这种情况下使用传播运算符

Question

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

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

我的问题如下：

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

据我了解，这可以解释为

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

and ...props 将确保它获得 this.props 的所有对象，不包括 rowIndex、字段和数据。我说得对吗？

所以我的问题是，如果不使用 ...props 而是使用 ...somethingElse 来使两个 'props' 看起来不同，这不是更好吗。

在 <Cell {...props}> 中...道具实际包含什么？ this.props 或 'remaining' 的所有对象，除了 rowIndex、字段、数据等？

这是 link 片段的来源： https://facebook.github.io/fixed-data-table/getting-started.html

Answer 1

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

这是 ES6/2015 功能和建议功能的实现：

"destructuring" (http://es6-features.org/#ObjectMatchingShorthandNotation)
"object rest properties" 目前正在提案中的一个功能（参见 https://github.com/sebmarkbage/ecmascript-rest-spread），它正在通过 babel 插件 transform-object-rest-spread 启用。

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

因此，您对 1 号的假设是正确的。 ...props 确实会包含除 rowIndex、field 和 data 之外的所有道具。这样做的好处是您不需要知道或列出任何 "other" 属性，它们将自动绑定到新创建的 props 对象中。

如何命名完全取决于您，但我同意 "reusing" 名称道具可能有点混乱。视情况而定。我倾向于用不同的方式命名我的名字。

2。 <Cell {...props}>

这是 "JSX spread attributes" 语法 (https://facebook.github.io/react/docs/jsx-spread.html) 的实现。

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

例如，如果您有传入的道具对象：

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

这将导致：

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

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

请解释在这种情况下使用传播运算符

Please explain the use of spread operator in this case

javascript

jsx

reactjs

ecmascript-next