花括号外的扩展运算符是什么？

Question

这来自我的React项目，是我以前从未见过的东西：

const { list, loading, failed } = this.props
return <ExperienceList {…{ list, loading, failed }} />

具体来说，我指的是花括号之外的扩展运算符。我习惯于看到它们在花括号内部。

- Tycholiz

---

可能意味着：1）仅从原始道具中选择这3个键，然后2）像往常一样进行扩展，即将这3个道具应用于组件。在我看来。 - Hero Qu

你正在将对象分解为另一个对象。 - Get Off My Lawn

可能是 这三个点在 React 中是什么？ 的重复。 - Emile Bergeron

不是重复的问题；我的问题与在对象之前加上“...”时它如何工作有关。 - Tycholiz

Answer 1

在你的例子中

return <ExperienceList {…{ list, loading, failed }} />

等同于

return <ExperienceList {…this.props} />

它执行相同的操作，即

return <ExperienceList list={list} loading={loading} failed={failed} />

- Federkun

---

请注意，只有当"this.props"仅包含这三个键时，它才严格等同于"...this.props"。 - Hamms

是的，在这种情况下假设 this.props == { list, loading, failed } - Federkun

那么以这种方式编写的真正好处是什么？ - Tycholiz

我能想到的唯一可能是 this.props 可能有很多属性，但你只想转发其中的三个。 - Federkun