리액트의 이 세 점은 무엇을 하고 있습니까?
「 」가 죠?...(JSX를 사용하여) 이 리액트 코드에서 수행하며, 이 코드의 이름은 무엇입니까?
<Modal {...this.props} title='Modal heading' animation={false}>
그건 특성 확산 표기법이야ES2018(어레이/기타블용 확산은 ES2015 이전 버전)에서 추가되었지만 오랫동안 React 프로젝트에서 변환(속성뿐만 아니라 다른 곳에서도 "JSX 확산 속성"으로)을 통해 지원되었습니다.
{...this.props} 에서 '소유'할 수 있는 재산들을 펼치다props의 개별 특성으로서Modal만들고 있는 요소.를 들어, " "의 경우, " 입니다.this.props되어 있다a: 1 ★★★★★★★★★★★★★★★★★」b: 2 (그래서)
<Modal {...this.props} title='Modal heading' animation={false}>
와 같을 것이다.
<Modal a={this.props.a} b={this.props.b} title='Modal heading' animation={false}>
이 무엇이든 "소유"에 있습니다.props포함되어 있습니다.
★★children에서의 "소유" 속성입니다.props , , 스 will , , , , , , , , , , , , , , , 。 때문에 에 이 자성분은 '자성분'으로 .Modal와 닫는 에 넣는 좋은 종류입니다.children속성을 지정합니다.§:
class Example extends React.Component {
render() {
const { className, children } = this.props;
return (
<div className={className}>
{children}
</div>
);
}
}
ReactDOM.render(
[
<Example className="first">
<span>Child in first</span>
</Example>,
<Example className="second" children={<span>Child in second</span>} />
],
document.getElementById("root")
);.first {
color: green;
}
.second {
color: blue;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>확산 표기는 해당 사용 사례뿐만 아니라 기존 개체의 속성 대부분(또는 모두)을 포함하는 새 개체를 만들 때 유용합니다. 상태를 직접 수정할 수 없기 때문에 상태를 업데이트할 때 자주 표시됩니다.
this.setState(prevState => {
return {foo: {...prevState.foo, a: "updated"}};
});
명령어는 " " " 를 대체합니다.this.state.foo「」와 같은 .foo「 」를 제외하고,aproperty가 는 ''가 됩니다."updated":
const obj = {
foo: {
a: 1,
b: 2,
c: 3
}
};
console.log("original", obj.foo);
// Creates a NEW object and assigns it to `obj.foo`
obj.foo = {...obj.foo, a: "updated"};
console.log("updated", obj.foo);.as-console-wrapper {
max-height: 100% !important;
}...이름에서 나타내듯이 표현식을 확장할 수 있는 확산 속성이라고 불립니다.
var parts = ['two', 'three'];
var numbers = ['one', ...parts, 'four', 'five']; // ["one", "two", "three", "four", "five"]
이 경우(간단하게 설명하겠습니다)
// Just assume we have an object like this:
var person= {
name: 'Alex',
age: 35
}
이것은, 다음과 같습니다.
<Modal {...person} title='Modal heading' animation={false} />
와 동등하다
<Modal name={person.name} age={person.age} title='Modal heading' animation={false} />
즉, 깔끔한 지름길이라고 할 수 있습니다.
세 개의 점은 ES6의 확산 연산자를 나타냅니다.JavaScript에서 많은 작업을 수행할 수 있습니다.
어레이 연결
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil']; var racingGames = ['Need For Speed', 'Gran Turismo', 'Burnout']; var games = [...shooterGames, ...racingGames]; console.log(games) // ['Call of Duty', 'Far Cry', 'Resident Evil', 'Need For Speed', 'Gran Turismo', 'Burnout']어레이 파괴
var shooterGames = ['Call of Duty', 'Far Cry', 'Resident Evil']; var [first, ...remaining] = shooterGames; console.log(first); //Call of Duty console.log(remaining); //['Far Cry', 'Resident Evil']2개의 오브젝트를 조합하다
var myCrush = { firstname: 'Selena', middlename: 'Marie' }; var lastname = 'my last name'; var myWife = { ...myCrush, lastname } console.log(myWife); // {firstname: 'Selena', // middlename: 'Marie', // lastname: 'my last name'}
세 개의 점에는 Rest Parameters라고 하는 다른 용도가 있으며, 이를 통해 모든 인수를 하나의 배열로 함수에 가져올 수 있습니다.
배열로서의 함수 인수
function fun1(...params) { }
...(JavaScript에서는 3개의 점)을 스프레드 구문 또는 스프레드 연산자라고 합니다.이를 통해 배열 표현식이나 문자열과 같은 반복 가능한 표현식이나 개체 표현식을 어디에 배치하더라도 확장할 수 있습니다.이것은 React에만 국한된 것이 아닙니다.JavaScript 연산자입니다.
이 모든 답변은 도움이 되지만, 스프레드 구문(스프레드 연산자)에서 가장 많이 사용되는 실제 사용 사례를 나열하고 싶습니다.
1. 어레이의 결합(어레이의 연결)
어레이를 결합하는 방법은 다양하지만 분산 연산자를 사용하면 어레이의 임의의 위치에 배치할 수 있습니다.2개의 어레이를 조합하여 어레이 내의 임의의 위치에 요소를 배치하는 경우는, 다음과 같이 하십시오.
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. 어레이 복사
어레이의 복사를 원할 때는, 그 방법이 있었습니다.그러나 산포 연산자에서도 동일한 작업을 수행할 수 있습니다.
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3. 적용되지 않는 호출 기능
한다.doStuff()함수는 종종 다음과 같은 방법을 사용합니다.
function doStuff (x, y, z) {}
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
그러나 확산 연산자를 사용하면 배열을 함수로 전달할 수 있습니다.
doStuff(...args);
4. 어레이 파괴
소멸 연산자와 나머지 연산자를 함께 사용하여 원하는 대로 정보를 변수에 추출할 수 있습니다.
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }
5. REST 파라미터로서의 함수 인수
점이 (ES6 개 3 개 3 ） 。...를 모두 는 함수의 나머지 인수를 모두 배열로 수집하는 rest 파라미터를 나타냅니다.
function f(a, b, ...args) {
console.log(args);
}
f(1, 2, 3, 4, 5); // [3, 4, 5]
6. 함수 사용
확산이 인수로 사용되는 함수는 임의의 수의 인수를 받아들일 수 있는 함수로 사용할 수 있습니다.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. 두 오브젝트의 결합
확산 연산자를 사용하여 두 개체를 결합할 수 있습니다.이렇게 하면 쉽고 깔끔하게 할 수 있습니다.
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. 문자열을 다른 문자로 구분
확산 연산자를 사용하여 문자열을 개별 문자로 분산할 수 있습니다.
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
산포 연산자를 사용하는 더 많은 방법을 생각할 수 있습니다.여기에 기재되어 있는 것은, 그 일반적인 사용 사례입니다.
JavaScript의 세 점은 분산/휴식 연산자입니다.
산포 연산자
확산 구문을 사용하면 여러 개의 인수가 예상되는 곳에서 식을 확장할 수 있습니다.
myFunction(...iterableObj);
[...iterableObj, 4, 5, 6]
[...Array(10)]
나머지 파라미터
rest 파라미터 구문은 변수 수가 있는 함수에 사용됩니다.
function(a, b, ...theArgs) {
// ...
}
어레이의 확산/휴식 연산자는 ES6에서 도입되었습니다.객체 확산/휴면 특성에 대한 State 2 제안이 있습니다.
또한 TypeScript는 확산 구문을 지원하며 사소한 문제가 있는 이전 버전의 ECMAScript로 변환할 수 있습니다.
이는 리액트에서도 사용되는 ES6의 특징이다.다음의 예를 참조해 주세요.
function Sum(x, y, z) {
return x + y + z;
}
console.log(Sum(1, 2, 3)); // 6
이 방법은 최대 3개의 파라미터가 있는 경우 괜찮습니다.단, 예를 들어 110개의 파라미터를 추가해야 하는 경우에는 어떻게 해야 합니다.다 정의하고 하나씩 추가할까요?
물론 더 쉽게 할 수 있는 방법이 있는데, 그것은 확산이라고 불립니다.이러한 모든 파라미터를 전달하는 대신 다음과 같이 기술합니다.
function (...numbers){}
파라미터가 얼마나 많은지는 알 수 없지만 파라미터가 산적해 있다는 것은 알고 있습니다.
ES6를 기반으로 위의 함수를 다음과 같이 고쳐 쓸 수 있습니다.또, 그 사이에 확산과 매핑을 사용하면, 간단하게 할 수 있습니다.
let Sum = (...numbers) => {
return numbers.reduce((prev, current) => prev + current);
}
console.log(Sum(1, 2, 3, 4, 5, 6, 7, 8, 9)); // 45
브랜든 모렐리에게 경의를 표합니다.그는 여기에 완벽하게 설명했지만 링크가 끊어질 수 있기 때문에 아래 내용을 붙여넣고 있습니다.
세 의 점, 즉 3개의 점으로 되어 있습니다....이를 통해 0+ 인수가 예상되는 장소에서 반복 가능한 항목을 확장할 수 있습니다.이치노이것이 무엇을 의미하는지 이해하기 위해 몇 가지 다른 사용 사례를 살펴보겠습니다.
예 1 - 어레이 삽입
아래 코드를 보세요.이 코드에서는 spread 구문은 사용하지 않습니다.
var mid = [3, 4];
var arr = [1, 2, mid, 5, 6];
console.log(arr);하다'라는 배열을 mid 두 mid이치노을 기대하십니까?arr쇄할할 수???위의 [파일명을 지정하여 실행]를 클릭하여 결과를 확인합니다.을 사용하다
[1, 2, [3, 4], 5, 6]
그게 당신이 예상했던 결과인가요?
mid the the the에 arr이치노그게 목표라면 그걸로 됐어.그러나 값이 1~6인 단일 어레이만 원하는 경우에는 어떻게 해야 합니까?이를 위해 확산 구문을 사용할 수 있습니다!확산 구문을 사용하면 어레이 요소를 확장할 수 있습니다.
아래 코드를 보겠습니다.하여 든든것 the the the 、 모이 to to to the the the the를 하고 있습니다확산 구문을 사용하여 삽입하고 있습니다.mid the the the에 arr 스위칭:
var mid = [3, 4];
var arr = [1, 2, ...mid, 5, 6];
console.log(arr);실행 버튼을 누르면 다음과 같은 결과가 나타납니다.
[1, 2, 3, 4, 5, 6]
대단해!
위에서 읽은 확산 구문 정의를 기억하십니까?이치노바와 같이, 「」를 하면,arr 및 에 확산 합니다.mid이 아니라 '를 사용하여mid어레이가 확장됩니다., 「 」의 각 , 「 」의 각 요소, 「 」의 가,mid이 arr배열. 중첩 배열 대신 1에서 6 사이의 단일 배열이 생성됩니다.
예 2 - 산술
JavaScript에는 수학 오브젝트가 내장되어 있어 재미있는 수학 계산을 할 수 있습니다.'어느 정도', '어느 정도', '어느 정도'에 알아보겠습니다.Math.max() ★★★★★★★★★★★★★★★★★★★★★★★.Math.max() 중 큰 값을 합니다.을 하다
Math.max();
// -Infinity
Math.max(1, 2, 3);
// 3
Math.max(100, 3, 4);
// 100
바와 같이 , 「」를 참조해 주세요.Math.max()에는 복수의 파라미터가 필요합니다.유감스럽게도 단일 어레이를 입력으로 사용할 수는 없습니다.구문 쉽게 할 수 있는 Math.max()에서는, 「 」를 사용합니다..apply().
var arr = [2, 4, 8, 6, 0];
function max(arr) {
return Math.max.apply(null, arr);
}
console.log(max(arr));효과가 있어, 정말 짜증날 뿐이야.
이제 확산 구문에 대해서도 동일한 작업을 수행하는 방법을 살펴보겠습니다.
var arr = [2, 4, 8, 6, 0];
var max = Math.max(...arr);
console.log(max);할 필요가 .Math.max()★★★★★★★★★★★★★★★★★★★★★★★★★★★★! 구문은 하고 어레이 의 각 으로 한다.Math.max()★★★★★★★★★★★★★★★★★★!
예 3 - 어레이 복사
JavaScript에서는 기존 배열과 동일한 새 변수를 설정하여 배열만 복사할 수 없습니다.다음 코드 예를 생각해 보겠습니다.
var arr = ['a', 'b', 'c'];
var arr2 = arr;
console.log(arr2);실행을 누르면 다음과 같은 출력이 표시됩니다.
['a', 'b', 'c']
언뜻 보면 효과가 있었던 것 같습니다.arr의 값을 arr2에 복사한 것 같습니다.하지만 그런 일은 일어나지 않았다.JavaScript에서 오브젝트를 조작할 때(array는 오브젝트의 일종)에는 값이 아닌 참조에 의해 할당됩니다.이는 arr2가 arr과 동일한 참조에 할당되었음을 의미합니다.즉, arr2에 대해 수행하는 모든 작업은 원래 arr 어레이에도 영향을 미칩니다(그 반대도 마찬가지).아래를 봐주세요.
var arr = ['a', 'b', 'c'];
var arr2 = arr;
arr2.push('d');
console.log(arr);위에서는 새로운 요소 d를 ar2에 밀어 넣었습니다.그러나 arr 값을 로그아웃하면 d 값이 해당 배열에도 추가되었음을 알 수 있습니다.
['a', 'b', 'c', 'd']
하지만 두려워할 필요는 없어!확산 연산자를 사용할 수 있습니다!다음 코드를 고려하십시오.위와 거의 같습니다.대신 대괄호 쌍 내에서 스프레드 연산자를 사용했습니다.
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
console.log(arr2);실행을 누르면 예상 출력이 표시됩니다.
['a', 'b', 'c']
위에서 ar의 배열 값은 ar2에 할당되는 개별 요소가 되도록 확장되었습니다.이제 arr2 어레이를 원하는 만큼 변경할 수 있습니다.원래 arr 어레이에 영향을 주지 않습니다.
var arr = ['a', 'b', 'c'];
var arr2 = [...arr];
arr2.push('d');
console.log(arr);다시 말씀드리지만 arr2 어레이 정의의 괄호를 채우도록 arr 값이 확장되기 때문입니다.따라서 첫 번째 예시와 같이 ar에 대한 참조가 아닌 ar의 개별 값과 동일하게 ar2를 설정하고 있습니다.
보너스 예시: 문자열에서 어레이로
재미있는 마지막 예로서 스프레드 구문을 사용하여 문자열을 배열로 변환할 수 있습니다.대괄호 쌍 내에서 확산 구문을 사용하면 됩니다.
var str = "hello";
var chars = [...str];
console.log(chars);심플하고 빠른 이점에 대해 알고 싶은 분:
우선, 이것은 React만의 구문이 아닙니다.이것은 ES6의 spread 구문이라고 불리는 구문이며, 어레이와 오브젝트를 반복(머지, 추가 등)합니다.자세한 내용은 여기를 참조하십시오.
질문에 답하려면:
예를 들어 다음과 같은 태그가 있다고 가정합니다.
<UserTag name="Supun" age="66" gender="male" />
이렇게 하면 됩니다.
const user = {
"name"=>"Joe",
"age"=>"50"
"test"=>"test-val"
};
<UserTag name="Supun" gender="male" {...user} age="66" />
그러면 태그는 다음과 같습니다.
<UserTag name="Joe" gender="male" test="test-val" age="66" />
때 이 Atribute는 .user아트리뷰트 아트리뷰트 아트리뷰트 아트리뷰트따라서 이 예에서는 나이가 그대로 유지됩니다.
JSX에서 소품을 다르게 정의하는 것뿐입니다!
...ES6의 어레이 및 객체 연산자(오브젝트 1은 아직 완전히 지원되지 않음)이기 때문에 기본적으로 소품을 이미 정의한 경우에는 이러한 방법으로 요소에 전달할 수 있습니다.
이 경우 코드는 다음과 같습니다.
function yourA() {
const props = {name='Alireza', age='35'};
<Modal {...props} title='Modal heading' animation={false} />
}
정의한 소품을 분리하여 필요에 따라 재사용할 수 있습니다.
다음과 같습니다.
function yourA() {
<Modal name='Alireza' age='35' title='Modal heading' animation={false} />
}
다음은 JSX의 확산 연산자에 대한 React 팀의 인용문입니다.
JSX 분산 속성 구성 요소에 배치하려는 모든 속성을 미리 알고 있으면 JSX를 쉽게 사용할 수 있습니다.
var component = <Component foo={x} bar={y} />;
뮤트는
설정할 속성을 모르는 경우 나중에 개체에 추가할 수 있습니다.
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y; // also bad
이는 올바른 propType을 나중에 확인할 수 있기 때문에 안티 패턴입니다.즉, propType 오류는 암호화 스택트레이스로 끝납니다
그 소품들은 불변의 것으로 여겨져야 한다.소품 오브젝트를 다른 장소에서 뮤트 하면 예기치 않은 결과가 발생할 수 있으므로 이상적으로는 이 시점에서 정지된 오브젝트입니다.
확산
이제 스프레드 속성이라고 하는 JSX의 새로운 기능을 사용할 수 있습니다.
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
전달한 객체의 속성은 구성 요소의 소품으로 복사됩니다.
이를 여러 번 사용하거나 다른 속성과 결합할 수 있습니다.사양 순서는 중요합니다.이후의 Atribut은 이전의 Atribut보다 우선합니다.
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
기호는요?★★★★★★★★★★★★★★★★★?
...연산자 확산 연산자는 ES6의 됩니다.연산자(또는 확산 연산자)는 ES6의 어레이에서 이미 지원됩니다.ECMAScript를 사용합니다.JSX에서 보다 명확한 구문을 제공하기 위해 이러한 지원 및 개발 표준을 활용하고 있습니다.
3개 점 three...산포 연산자 또는 정지 모수를 나타냅니다.
함수 호출에 대한 인수 또는 배열 요소에 대한 인수를 0개 이상 예상하는 곳에서 배열 식이나 문자열 또는 반복할 수 있는 모든 항목을 확장할 수 있습니다.
- 2개의 어레이를 Marge하다
var arr1 = [1,2,3];
var arr2 = [4,5,6];
arr1 = [...arr1, ...arr2];
console.log(arr1); //[1, 2, 3, 4, 5, 6]- 어레이 복사 중:
var arr = [1, 2, 3];
var arr2 = [...arr];
console.log(arr); //[1, 2, 3]주의: 어레이를 복사할 때 구문의 확산은 효과적으로 한 단계 깊이까지 진행됩니다.따라서 다음 예시와 같이 다차원 배열 복사에는 적합하지 않을 수 있습니다(Object.assign() 및 스프레드 구문과 동일합니다).
- 특정 인덱스의 다른 어레이에 값을 추가합니다(예: 3).
var arr1 = [4, 5]
var arr2 = [1, 2, 3, ...arr1, 6]
console.log(arr2); // [1, 2, 3, 4, 5, 6]- 새 컨스트럭터를 호출하는 경우:
var dateFields = [1970, 0, 1]; // 1 Jan 1970
var d = new Date(...dateFields);
console.log(d);- 개체 리터럴로 확산:
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };
var clonedObj = { ...obj1 };
console.log(clonedObj); // {foo: "bar", x: 42}
var mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // {foo: "baz", x: 42, y: 13}에 주의:foo obj1에 덮어쓰기되었습니다.foo★★★★★★★★★★★★★★★★★★.
- rest 파라미터 구문으로서 무한의 인수를 배열로 나타낼 수 있습니다.
function sum(...theArgs) {
return theArgs.reduce((previous, current) => {
return previous + current;
});
}
console.log(sum(1, 2, 3)); //6
console.log(sum(1, 2, 3, 4)); //10주의: 확산 구문(확산 속성 제외)은 반복 가능한 개체에만 적용할 수 있습니다.
이 때문에, 다음의 에러가 발생합니다.
var obj = {'key1': 'value1'};
var array = [...obj]; // TypeError: obj is not iterablePython 월드에서 온 사람들에게 JSX 스프레드 속성은 인수 목록(Python)을 언팩하는 것과 같습니다.**ㄹ 수 있다
JSX의 질문인 것은 알지만, 유추에 대해 작업하는 것이 더 빨리 이해하는 데 도움이 될 수 있습니다.
... 연산자에 사용됩니다
부모 컴포넌트에서 자녀 컴포넌트로 소품을 전달하는 깔끔한 방법을 제공합니다.예를 들어, 부모 컴포넌트의 이러한 소품들을 볼 때,
this.props = {
username: "danM",
email: "dan@mail.com"
}
다음과 같은 방법으로 아이에게 전달될 수 있습니다.
<ChildComponent {...this.props} />
이것과 비슷하다
<ChildComponent username={this.props.username} email={this.props.email} />
훨씬 깨끗해요
의 점 점 세(...)연산자로 , 어레이 및 . JSX는 JSX에서 보다 명확한 구문을 제공하기 위해 이러한 지원 및 개발 표준을 활용합니다.
개체 이니셜라이저의 속성 확산은 제공된 개체에서 새로 생성된 개체로 자체 열거 가능한 속성을 복사합니다.
let n = { x, y, ...z }; n; // { x: 1, y: 2, a: 3, b: 4 }
참고 자료:
React 어플리케이션에서는 소품을 전달하는 것이 일반적입니다.이를 통해 Pure 또는 Infulure(스테이트리스 또는 스테이트풀) 여부에 관계없이 자 컴포넌트에 상태 변경을 적용할 수 있습니다.소품을 전달할 때 가장 좋은 방법은 단일 특성이나 전체 특성으로 전달하는 것입니다.ES6의 어레이를 지원함으로써 "..." 표기가 주어졌고, 이를 통해 개체 전체를 아이에게 전달할 수 있게 되었습니다.
아이에게 소품을 전달하는 일반적인 과정은 다음 구문을 통해 알 수 있습니다.
var component = <Component foo={x} bar={y} />;
소품 수가 적을 때는 괜찮지만, 소품 수가 많아지면 관리가 어려워집니다.이 메서드의 문제는 하위 컴포넌트 내에서 필요한 속성을 모르며 일반적인 JavaScript 메서드는 이러한 속성을 단순하게 설정하고 나중에 오브젝트에 바인드하는 것입니다.이로 인해 propType 체크 및 암호 스택트레이스 오류가 발생하여 도움이 되지 않고 디버깅 지연이러한 오류는 도움이 되지 않습니다.다음으로 이 방법의 예와 실행하지 않는 방법을 나타냅니다.
var component = <Component />;
component.props.foo = x; // bad
component.props.bar = y;
이와 같은 결과를 얻을 수 있지만 이를 통해 보다 적절한 성공을 거둘 수 있습니다.
var props = {};
props.foo = x;
props.bar = y;
var component = Component(props); // Where did my JSX go?
그러나 JSX 스프레드 또는 JSX를 사용하지 않기 때문에 이를 방정식에 루프백하려면 다음과 같은 작업을 수행할 수 있습니다.
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
"...props"에 포함된 속성은 foo: x, bar: y입니다.이것은 다른 속성과 결합하여 다음 구문을 사용하여 "...props" 속성을 덮어쓸 수 있습니다.
var props = { foo: 'default' };
var component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'
또한 다른 속성 개체를 서로 복사하거나 다음과 같이 결합할 수 있습니다.
var oldObj = { foo: 'hello', bar: 'world' };
var newObj = { ...oldObj, foo: 'hi' };
console.log(newObj.foo); // 'hi';
console.log(newObj.bar); // 'world';
또는 다음과 같은 두 개의 다른 개체를 병합합니다(일부 리액트 버전에서는 아직 사용할 수 없습니다).
var ab = { ...a, ...b }; // merge(a, b)
Facebook의 react/docs 사이트에 의하면, 이것을 설명하는 또 다른 방법은 다음과 같다.
이미 "props"를 개체로 가지고 있고 JSX에서 전달하려면 "..."를 SPRADE 연산자로 사용하여 전체 소품 개체를 전달할 수 있습니다.다음 두 가지 예는 동일합니다.
function App1() {
return <Greeting firstName="Ben" lastName="Hector" />;
}
function App2() {
const props = {firstName: 'Ben', lastName: 'Hector'};
return <Greeting {...props} />;
}
확산 속성은 일반 컨테이너를 작성할 때 유용합니다.그러나 상관없는 많은 소품을 상관없는 컴포넌트에 쉽게 전달함으로써 코드를 혼란스럽게 만들 수도 있습니다.이 구문은 신중하게 사용해야 합니다.
JavaScript에서는 spreads 구문이라고 합니다.
JavaScript에서 어레이 또는 개체를 파괴하기 위해 사용합니다.
예:
const objA = { a: 1, b: 2, c: 3 }
const objB = { ...objA, d: 1 }
/* Result of objB will be { a: 1, b: 2, c: 3, d: 1 } */
console.log(objB)
const objC = { ....objA, a: 3 }
/* result of objC will be { a: 3, b: 2, c: 3, d: 1 } */
console.log(objC)
, 하다, 하다, 하다, 하다, 하다를 통해서도 같은 를 낼 수 요.Object.assign()기능을 합니다.
레퍼런스: 구문 확산
ECMAScript 6(ES6)에 도입된 확산 연산자(트리플 연산자)입니다.ECMAScript(ES6)는 JavaScript의 래퍼입니다.
확산 연산자는 소품에서 속성을 열거합니다.
this.beating = { firstName: 'Dan', 성: 'Abramov', 도시: 'New York', 국가: 'USA' } <모달 {...this.beating} title='모달 머리글' 애니메이션 {false}>
{...this.dev} = {firstName: 'Dan', 성: 'Abramov', 도시: 'New York', 국가: 'USA'}
그러나 주 피쳐 스프레드 연산자는 참조 유형에 사용됩니다.
예를들면,
let person= {
name: 'Alex',
age: 35
}
person1 = person;
person1.name = "Raheel";
console.log( person.name); // Output: Raheel
이를 참조 유형이라고 합니다.한 개체는 메모리에서 공유할 수 있기 때문에 다른 개체에 영향을 미칩니다.독립적으로 값을 얻는 경우 메모리 확산을 의미하며 둘 다 분산 연산자를 사용합니다.
let person= {
name: 'Alex',
age: 35
}
person2 = {...person};
person2.name = "Shahzad";
console.log(person.name); // Output: Alex
...JS의 .
산포 연산자 없이.
let a = ['one','one','two','two'];
let unq = [new Set(a)];
console.log(a);
console.log(unq);
출력:
(4) ['one', 'one', 'two', 'two']
[Set(2)]
산포 연산자 포함.
let a = ['one','one','two','two'];
let unq = [...new Set(a)];
console.log(a);
console.log(unq);
출력:
(4) ['one', 'one', 'two', 'two']
(2) ['one', 'two']
확산 연산자!대부분의 ppl은 이미 질문에 우아하게 답했기 때문에, 저는 확산 연산자를 사용하는 방법을 간단히 제안하고 싶습니다.
...스프레드 연산자는 다음과 같은 JavaScript의 많은 다른 루틴 작업에 유용합니다.
- 어레이 복사
- 어레이 연결 또는 결합
- 산술 함수 사용
- 배열을 인수로 사용
- 목록에 항목 추가
- React에서 상태 추가
- 오브젝트 결합
- NodeList를 어레이로 변환하는 중
자세한 내용은 기사를 참조하십시오.스프레드 연산자 사용 방법.익숙해지길 권합니다.산포 연산자를 사용할 수 있는 멋진 방법은 매우 많습니다.
세 의 도트 그 those those those those those those those...반응항이 아닙니다.JavaScript ES6를 사용합니다.따라서 원래 어레이를 방해하지 않고 새 어레이를 만들 수 있습니다.이것은 오브젝트에도 사용할 수 있습니다.
const arr1 = [1, 2, 3, 4, 5]
const arr2 = arr1 // [1, 2, 3, 4, 5]
/*
This is an example of a shallow copy.
Where the value of arr1 is copied to arr2
But now if you apply any method to
arr2 will affect the arr1 also.
*/
/*
This is an example of a deep copy.
Here the values of arr1 get copied but they
both are disconnected. Meaning if you
apply any method to arr3 it will not
affect the arr1.
*/
const arr3 = [...arr1] // [1, 2, 3, 4, 5]
하면 어레이나 하거나 값을 추가할 수 .를 들어,나 오브젝트 등의 데이터 에서 값을 할 수 있습니다.const obj={name:"ram",age:10} const {name}=objobj는 와 마찬가지로, obj는 obj와 같이obj는 obj와 같이,const newObj={...obj,address:"Nepal"}이 예에서 새 속성을 해당 개체에 추가했습니다.이치노
그것들은 스프레드라고 불린다.이름에서 알 수 있듯이 어레이나 오브젝트에 그 가치가 무엇이든 넣는다는 것을 의미합니다.
예를 들어 다음과 같습니다.
let a = [1, 2, 3];
let b = [...a, 4, 5, 6];
console.log(b);
> [1, 2, 3, 4, 5, 6]
확산 연산자를 사용하면 개체, 문자열 또는 배열과 같은 반복 가능한 요소를 해당 요소로 확장하는 반면, 나머지 연산자는 요소 집합을 하나의 배열로 축소하여 역방향 작업을 수행할 수 있습니다.
언급URL : https://stackoverflow.com/questions/31048953/what-are-these-three-dots-in-react-doing
'programing' 카테고리의 다른 글
| JavaScript에서 HTML 특수 문자를 피할 수 있습니까? (0) | 2022.09.24 |
|---|---|
| Access-Control-Allow-Origin을 바이패스하는 방법 (0) | 2022.09.24 |
| Vue Chart.js - 막대 그래프의 단순한 점/선 (0) | 2022.09.24 |
| Numpy 어레이를 이미지로 저장 (0) | 2022.09.24 |
| 다른 테이블에서 ID가 있는 행 선택 (0) | 2022.09.24 |