React CopyButton组件render方法中解构赋值及...other语法含义问询

语法归属 #

你看到的const { classes, theme, hidden, ...other } = this.props;是ES6 标准新增的对象解构赋值语法，赋值运算符左侧的{}并不是普通对象，是解构语法的固定标识，作用是快速从右侧的对象中提取对应名称的属性，直接声明为同名变量，不需要重复写this.props.classes、this.props.hidden这类冗长的取值语句。

整行语句含义 #

这行代码的作用是从当前CopyButton组件的props对象里，把classes、theme、hidden三个显式声明的属性单独提取出来，声明为三个同名的常量；剩下所有没有被显式提取的属性，会统一被收集到other对象中。

...other的含义 #

这里的...虽然和展开运算符是同一个符号，但此处属于对象剩余属性收集语法，作用和展开运算符刚好相反：展开运算符是把一个对象的所有属性拆出来扩散，而放在解构赋值的最后一个变量前时，作用是把前面显式解构的属性之外，所有剩下的可枚举属性都打包收集到后面的变量里。
举个实际调用的例子：
如果你使用组件时写<CopyButton hidden={false} size="small" color="primary" onClick={handleCopy} />，那么props里除了classes、theme、hidden之外，还有size、color、onClick三个属性，此时other的值就是{size: "small", color: "primary", onClick: handleCopy}，后续代码里把{...other}透传给IconButton，就可以把这些额外传入的属性全部传递给内部的按钮组件，不需要手动逐个声明传递，大幅简化透传属性的代码。

内容的提问来源于stack exchange，提问作者ZhaoGang