'...rest' 在这个对象解构中代表什么？

IT技术 javascript reactjs react-bootstrap spread-syntax
2021-04-19 15:24:26

我正在阅读关于 react 中的 unknown-prop 警告，特别是因为我正在使用 react-bootstrap 包并且在那里偶然发现了它们。

我读过：'为了解决这个问题，复合组件应该“消耗”任何用于复合组件而不是用于子组件的props'，在这里：

https://gist.github.com/jimfb/d99e0678e9da715ccf6454961ef04d1b

并给出了一个示例，说明如何使用扩展运算符将变量从 props 中拉出，并将剩余的 props 放入变量中。

示例代码： 

function MyDiv(props) {
  const { layout, ...rest } = props
  if (layout === 'horizontal') {
    return <div {...rest} style={getHorizontalStyle()} />
  } else {
    return <div {...rest} style={getVerticalStyle()} />
  }
}

这是问题所在：在给出的示例中，我不明白这里代码中的“...rest”代表什么。我知道 '...' = spread 语法，但是“rest”这个词从何而来，它代表什么？

2个回答

这是 object rest operator，它从所有未显式解构的属性创建一个对象。

注意：因为对象 rest/spread 仍然是第 3 阶段的提议，并且需要babel 转换才能工作。

const obj = { a: 1, b: 2, c: 3};

const { a, ...everythingElse } = obj;

console.log(a);

console.log(everythingElse);

它相当于数组rest运算符：

const arr = [1, 2, 3];

const [a, ...rest] = arr;

console.log(a);
console.log(rest);

不要混淆休息操作符 (...) 和展开操作符（也就是...）：

'...' 在下面的代码中充当休息运算符：

const { layout, ...rest } = props

但在下面的代码中，'...' 充当扩展运算符：

return <div {...rest} style={getHorizontalStyle()} />
其它你可能感兴趣的问题
上一篇来自 Cloud Storage 的图像未在 .map 列表中重新渲染 下一篇react ag-grid 行自动高度不起作用