IT技术 - ReactJS 中的三个点有什么作用 - 吾爱随笔录

IT技术 javascript reactjs ecmascript-6

2021-02-02 20:37:18

const peopleList = this.state.people.map( x => {

    return <Person key={x.name} {...x} />
})

“{...x}”这个代码是什么意思？

2个回答

这是react中的扩展运算符语法。

来自MDN 文档：

展开语法允许在需要多个参数（用于函数调用）或多个元素（用于数组文字）或多个变量（用于解构赋值）的地方扩展表达式。

在您的情况下，<Person key={x.name} {...x} />这意味着将包含的整个对象或属性发送给它，x因为它看起来像propsPerson Component

例如如果

var x = {
     name: "Hello",
     last_name: "World"

}

那么如果你这样做 <Person key={x.name} {...x} />

以上将等价于

<Person key={x.name} name={x.name} last_name={x.last_name}/>

传播语法与props一起使用的顺序也很重要。

考虑将props传递给组件的情况，例如

var data = {
     name: 'abc',
     age: '25',
     college: 'lmit'
}

如果您使用扩展运算符语法，例如

 <Person key={x.name} name='xyz' {...data} />

然后 propname='xyz'被从数据解析的 key:value 对覆盖。所以最终的Person组件调用看起来像

 <Person key={x.name} name='abc' age= '25' college= 'lmit' />

但是，当你像这样写时

 <Person key={x.name}  {...data} name='xyz' />

然后name='abc'从 data 解析的 propname='xyz'被显式传递给Person. 所以最终的PersonComponent 调用看起来像

  <Person key={x.name} name='xyz' age= '25' college= 'lmit' />

我以前从未使用过扩展运算符。我应该。

2021-03-18 20:37:18

是的。有时我们习惯了使用通用语法。 ES6 的强大功能还需要更多的探索。

2021-03-19 20:37:18

很好的解释....谢谢！

2021-04-10 20:37:18

@Ved 是的，有时它会使代码非常短并且非常有用

2021-04-11 20:37:18

那就是扩展运算符。它是在 ES2015 中引入的。它获取 x 的所有属性并将它们分配给元素。

{...x} 意味着获取分配给对象 x 的所有属性，然后将它们分配给 <Person />

其它你可能感兴趣的问题