在react中{...settings}什么意思

Question

在react中{...settings}什么意思

Answer 1

这叫展开语法，属于es6的新语法，可以在函数调用、数组构造、构造字面量对象时, 将数据展开赋值。JSX中用在组件属性上可以将对象的属性展开到组件上，传递给组件props1、函数调用，展开数组参数12345function&nbsp;sum(x,&nbsp;y,&nbsp;z)&nbsp;{&nbsp;&nbsp;return&nbsp;x&nbsp;+&nbsp;y&nbsp;+&nbsp;z;}const&nbsp;numbers&nbsp;=&nbsp;[1,&nbsp;2,&nbsp;3];sum(...numbers);2、构造数组，展开数组12const&nbsp;arr1&nbsp;=&nbsp;[3,4,5];const&nbsp;arr2&nbsp;=&nbsp;[0,&nbsp;1,&nbsp;2,&nbsp;...arr1];&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;[0,1,2,3,4,5]3、构造数组，展开字符串12const&nbsp;str&nbsp;=&nbsp;'abc';const&nbsp;arr&nbsp;=&nbsp;[...str];&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;['a',&nbsp;'b',&nbsp;'c']4、构造对象，展开对象1234const&nbsp;obj1&nbsp;=&nbsp;{a:&nbsp;1,&nbsp;b:&nbsp;2,&nbsp;c:&nbsp;3};const&nbsp;obj2&nbsp;=&nbsp;{...obj1,&nbsp;d:&nbsp;4};&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;{a:&nbsp;1,&nbsp;b:&nbsp;2,&nbsp;c:&nbsp;3,&nbsp;d:&nbsp;4}const&nbsp;obj3&nbsp;=&nbsp;{...obj1,&nbsp;c:&nbsp;4};&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;{a:&nbsp;1,&nbsp;b:&nbsp;2,&nbsp;c:&nbsp;4}const&nbsp;obj4&nbsp;=&nbsp;{c:&nbsp;4,&nbsp;...obj1};&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;{a:&nbsp;1,&nbsp;b:&nbsp;2,&nbsp;c:&nbsp;3}5、JSX组件属性展开1234567891011render(){&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;settings&nbsp;=&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value:&nbsp;1,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;placeholder:&nbsp;'输入数值'&nbsp;&nbsp;&nbsp;&nbsp;};&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<MyInput&nbsp;{...settings}/>&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;上面的写法类似于&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;return&nbsp;<MyInput&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;value={settings.value}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;placeholder={settings.placeholder}/>}