react三個點指的是什么

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

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

代表“延展操作符”。

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

var people=['Wayou','John','Sherlock'];
//sayHello函數本來接收三個單獨的參數人一，人二和人三
function sayHello(people1,people2,people3){
    console.log(`Hello ${people1},${people2},${people3}`);
}
//但是我們將一個數組以拓展參數的形式傳遞，它能很好地映射到每個單獨的參數
sayHello(...people);//輸出：Hello Wayou,John,Sherlock 
//而在以前，如果需要傳遞數組當參數，我們需要使用函數的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三個點指的是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！