在react中{...settings}什么意思
在react中{...settings}什么意思
慕標(biāo)琳琳
2019-02-19 13:12:00
1 回答
白豬掌柜的
TA貢獻(xiàn)1893條經(jīng)驗(yàn) 獲得超10個贊
這叫展開語法，屬于es6的新語法，可以在函數(shù)調(diào)用、數(shù)組構(gòu)造、構(gòu)造字面量對象時, 將數(shù)據(jù)展開賦值。
JSX中用在組件屬性上可以將對象的屬性展開到組件上，傳遞給組件props
1、函數(shù)調(diào)用，展開數(shù)組參數(shù)
1 2 3 4 5 | function sum(x, y, z) { return x + y + z; } const numbers = [1, 2, 3]; sum(...numbers); |
2、構(gòu)造數(shù)組，展開數(shù)組
1 2 | const arr1 = [3,4,5]; const arr2 = [0, 1, 2, ...arr1]; // [0,1,2,3,4,5] |
3、構(gòu)造數(shù)組，展開字符串
1 2 | const str = 'abc'; const arr = [...str]; // ['a', 'b', 'c'] |
4、構(gòu)造對象，展開對象
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: '輸入數(shù)值' }; return <MyInput {...settings}/> // 上面的寫法類似于 // return <MyInput // value={settings.value} // placeholder={settings.placeholder}/> } |
- 1 回答
- 0 關(guān)注
- 808 瀏覽
添加回答
舉報(bào)
0/150
提交
取消