使用 ES6 扩展运算符反应道具语法 [重复]

Posted 2023-02-21

【中文标题】使用 ES6 扩展运算符反应道具语法 [重复]

【英文标题】：React props syntax with ES6 spread operator [duplicate]

【发布时间】：2018-04-21 23:21:15

【问题描述】：

我在一个 React 应用程序中注意到以下内容：

<UserList
  ... userIdsTyping, users 
/>

... userIdsTyping, users 到底在做什么？我知道它将子级传递给 UserList 组件，但是扩展运算符如何在这里工作？它与userIdsTyping和users有什么互动？

【问题讨论】：

您能否为这段代码显示更完整的上下文，或者这实际上不是 javascript？

【参考方案1】：

扩展运算符内联“扩展”对象。相当于下面的语法：

<UserList
    userIdsTyping=userIdsTyping
    users=users
/>

对象本身 userIdsTyping, users 是ES6 shorthand，并扩展为userIdsTyping: userIdsTyping, users: users。

这假定userIdsTyping 和users 的值是在范围内的其他位置定义的。