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

Question

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

Answer 1

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

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

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

1 2 3 4 5

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

2、构造数组，展开数组

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

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

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

4、构造对象，展开对象

1 2 3 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组件属性展开

1 2 3 4 5 6 7 8 9 10 11

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