请问在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}/>}

Answer 2

你可以在子组件添加一个componentWillRecieveProps周期，在里面获取到即将接收的props。如下： componentWillReceiveProps(nextProps) { this.setState({ A: nextProps.A }); }

Answer 3

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