javascript - 使用 ES6 扩展运算符 react props 语法

Question

这个问题在这里已经有了答案:

Using spread operator multiple times in javascript? (4 个回答)

What does three dots do in ReactJS [duplicate] (2 个回答)

关闭 5年前。

我在一个 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 的值在范围内的其他地方定义。