react三個點指的是什么

本篇內(nèi)容介紹了“react三個點指的是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

react的三個點代表“延展操作符”；在React中，延展操作符一般用于屬性的批量賦值上，使用方式如“var props = {};props.foo = x;props.bar = y;var component = <Component {...props} />;”。

代表“延展操作符”。

這個 … 操作符（也被叫做延展操作符 － spread operator）已經(jīng)被 ES6 數(shù)組 支持。它允許傳遞數(shù)組或者類數(shù)組直接做為函數(shù)的參數(shù)而不用通過apply。

var people=['Wayou','John','Sherlock'];
//sayHello函數(shù)本來接收三個單獨的參數(shù)人一，人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我們將一個數(shù)組以拓展參數(shù)的形式傳遞，它能很好地映射到每個單獨的參數(shù)
sayHello(...people);//輸出：Hello Wayou,John,Sherlock 
//而在以前，如果需要傳遞數(shù)組當(dāng)參數(shù)，我們需要使用函數(shù)的apply方法
sayHello.apply(null,people);//輸出：Hello Wayou,John,Sherlock

而在 React 中，延展操作符一般用于屬性的批量賦值上。在JSX中，可以使用…運算符，表示將一個對象的鍵值對與ReactElement的props屬性合并。

var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;
  
//等價于
var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component foo={x} bar={y} />;

它也可以和普通的XML屬性混合使用，需要同名屬性，后者將覆蓋前者：

var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

“react三個點指的是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！