Question

我正在阅读有关未知-prop警告的反应，特别是因为我正在使用react-bootstrap包，并在那里偶然发现它们。

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

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

给出了一个例子，说明如何使用扩展运算符从道具中提取变量，并将剩余的道具放入变量中。

示例代码：

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

以下是问题所在：在给出的示例中，我不明白此代码中的'... rest'代表什么。我得到了'...'=扩展语法，但是'rest'这个词来自何处以及它代表什么？

Answer 1

这是对象rest operator，它会从未明确解构的所有属性中创建一个对象。

注意：，因为对象休息/差价仍然是第3阶段提案，并且需要babel transform才能生效。

＆＃13;

const obj = { a: 1, b: 2, c: 3};

const { a, ...everythingElse } = obj;

console.log(a);

console.log(everythingElse);

＆＃13;

它等同于数组休息算子：

＆＃13;

const arr = [1, 2, 3];

const [a, ...rest] = arr;

console.log(a);
console.log(rest);

＆＃13;

Answer 2

不要混淆休息运营商（...）和传播运营商（也是......）：

＆＃39; ...＆＃39;在下面的代码中充当rest操作符：

const { layout, ...rest } = props

但在下面的代码中，＆＃39; ...＆＃39;充当传播运营商：

return <div {...rest} style={getHorizontalStyle()} />

在这个传播运算符示例中，'... rest'代表什么？

2 个答案: