使用ES6扩展运算符实现道具语法

Question

我在React应用程序中注意到以下内容:

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

到底在{...{ userIdsTyping, users }}做什么？我知道它将子节点传递给UserList组件,但是传播运算符如何在这里工作？它有什么作用userIdsTyping和users？

Answer 1

扩展运算符"扩展"对象内联.它等同于以下语法:

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

对象本身{ userIdsTyping, users }是ES6的简写,并扩展为{userIdsTyping: userIdsTyping, users: users}.

这是假定值userIdsTyping和users定义在其他地方范围内.