> 웹 프론트엔드 > 프런트엔드 Q&A > 반응에서 세 개의 점은 무엇을 나타냅니까?

반응에서 세 개의 점은 무엇을 나타냅니까?

藏色散人
풀어 주다: 2022-12-27 16:37:25
원래의
3417명이 탐색했습니다.

React의 세 점은 React에서 "확장 연산자"를 나타냅니다. 확장 연산자는 일반적으로 "var props = {};props.foo = x;props.bar = y; var 구성요소 = <구성요소 {...props} />;".

반응에서 세 개의 점은 무엇을 나타냅니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에 있는 세 개의 점은 무엇을 나타냅니까?

는 "확장 연산자"를 나타냅니다.

… 연산자(확산 연산자라고도 함)는 이미 ES6 배열에서 지원됩니다. 적용을 거치지 않고 배열 또는 배열과 유사한 함수를 함수의 매개변수로 직접 전달할 수 있습니다.

var people=[&#39;Wayou&#39;,&#39;John&#39;,&#39;Sherlock&#39;];
//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: &#39;default&#39; };
var component = <Component {...props} foo={&#39;override&#39;} />;
console.log(component.props.foo); // &#39;override&#39;
로그인 후 복사

권장 학습: "react video tutorial"

위 내용은 반응에서 세 개의 점은 무엇을 나타냅니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿