猿问
下载APP

ReactJS中有三个点做什么

ReactJS中有三个点做什么

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

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

这段代码的“{... x}”是什么意思?


aluckdog
浏览 185回答 2
2回答

尚方宝剑之说

这是一个反应中的扩展运算符语法。来自MDN DOCS:扩展语法允许在需要多个参数(用于函数调用)或多个元素(用于数组文字)或多个变量(用于解构赋值)的位置扩展表达式。在你的情况下<Person key={x.name} {...x} />它意味着发送包含的整个对象或属性,x因为它看起来像道具Person Component例如,如果var&nbsp;x&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;"Hello", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;last_name:&nbsp;"World"}如果你这样做的话&nbsp;<Person key={x.name} {...x} />以上将相当于<Person&nbsp;key={x.name}&nbsp;name={x.name}&nbsp;last_name={x.last_name}/>展开语法与道具一起使用的顺序也很重要。考虑将道具传递给类似组件的情况var&nbsp;data&nbsp;=&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;name:&nbsp;'abc', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;age:&nbsp;'25', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;college:&nbsp;'lmit'}如果你使用扩展运算符语法,如&nbsp;<Person&nbsp;key={x.name}&nbsp;name='xyz'&nbsp;{...data}&nbsp;/>然后,prop&nbsp;name='xyz'会被密钥重写:从数据中解析出的值对。所以最后的Person组件调用看起来像&nbsp;<Person&nbsp;key={x.name}&nbsp;name='abc'&nbsp;age=&nbsp;'25'&nbsp;college=&nbsp;'lmit'&nbsp;/>但是当你写它时&nbsp;<Person&nbsp;key={x.name}&nbsp;&nbsp;{...data}&nbsp;name='xyz'&nbsp;/>然后,name='abc'由数据解析的prop&nbsp;将被name='xyz'显式传递给它Person。所以最终的PersonComponent调用看起来像&nbsp;&nbsp;<Person&nbsp;key={x.name}&nbsp;name='xyz'&nbsp;age=&nbsp;'25'&nbsp;college=&nbsp;'lmit'&nbsp;/>

青春有我

那是传播运营商。它是在ES2015中引入的。它接受x的所有属性并将它们分配给元素。{...x}&nbsp;表示获取分配给对象x的所有属性,然后将它们分配给&nbsp;<Person />你可以在这里阅读更多:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答