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

Question

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

<UserList
  {...{ userIdsTyping, users }}
/>

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

Answer 1

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

<UserList
    userIdsTyping={userIdsTyping}
    users={users}
/>

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

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