使用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的值已在范围内的其他位置定义。