请问在react中{...settings}什么意思？

Question

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

Answer 1

1. 这叫展开语法，属于es6的新语法，可以在函数调用、数组构造、构造字面量对象时, 将数据展开赋值。

2. JSX中用在组件属性上可以将对象的属性展开到组件上，传递给组件props

   
   

1、函数调用，展开数组参数

12345

function sum(x, y, z) {  return x + y + z;}const numbers = [1, 2, 3];sum(...numbers);

2、构造数组，展开数组

12	const arr1 = [3,4,5];const arr2 = [0, 1, 2, ...arr1];    // [0,1,2,3,4,5]

3、构造数组，展开字符串

12	const str = 'abc';const arr = [...str];    // ['a', 'b', 'c']

4、构造对象，展开对象

1234	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组件属性展开

1234567891011

render(){    const settings = {        value: 1,        placeholder: '输入数值'    };    return <MyInput {...settings}/>    // 上面的写法类似于    // return <MyInput     //             value={settings.value}     //             placeholder={settings.placeholder}/>}

Answer 2

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

Answer 3

这叫展开语法，属于es6的新语法，可以在函数调用、数组构造、构造字面量对象时, 将数据展开赋值。
JSX中用在组件属性上可以将对象的属性展开到组件上，传递给组件props
1、函数调用，展开数组参数
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}/>
}