React 에서이 세 점은 무엇을합니까? 수행하는 작업은 무엇입니까 ? <Modal

...이 React (JSX 사용) 코드에서 수행하는 작업은 무엇입니까 ?

<Modal {...this.props} title='Modal heading' animation={false}>

답변

이것이 속성 스프레드 표기법 입니다. ES2018에 추가되었지만 (배열 / 이터 블에 대한 확산은 ES2015 이전), Transpilation을 통해 오랫동안 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, 스프레드가 포함됩니다. 따라서 이것이 나타나는 구성 요소에 자식 요소가 있으면에 전달됩니다 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제외한 모든 속성이 동일한 새 객체로 대체 a됩니다 "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에서 몇 가지 작업을 수행 할 수 있습니다.

  1. 배열 연결 

    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']

  2. 배열 해체 

      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']

  3. 두 객체 결합

    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'}

나머지 매개 변수 라고하는 3 개의 점에 대한 또 다른 용도가 있으며 모든 인수를 하나의 배열로 함수에 사용할 수 있습니다.

  1. 배열로서의 함수 인수

     function fun1(...params) {

 }

답변

JavaScript의 세 점은 스프레드 / 휴식 연산자 입니다.

스프레드 연산자

확산 구문은 표현식이 여러 인수가 예상되는 장소에서 확장 할 수 있습니다.

myFunction(...iterableObj);

[...iterableObj, 4, 5, 6]

[...Array(10)]

나머지 매개 변수

나머지 파라미터 구문 인수 가변 수의 기능을 위해 사용된다.

function(a, b, ...theArgs) {
  // ...
}

ES6에서는 어레이의 스프레드 / 휴식 연산자가 도입되었습니다. 객체 확산 / 휴식 특성에 대한 State 2 제안 이 있습니다.

TypeScript는 또한 확산 구문을 지원하며 사소한 문제가있는 이전 버전의 ECMAScript로 변환 할 수 있습니다 .

답변

이것은 ES6의 기능으로 React에서도 사용됩니다. 아래 예를보십시오.

function Sum(x,y,z) {
   return x + y + z;
}
console.log(Sum(1,2,3)); //6

최대 3 개의 매개 변수가있는 경우이 방법이 좋습니다. 그러나 예를 들어 110 개의 매개 변수를 추가해야하는 경우 모두 정의하고 하나씩 추가해야합니까?

물론 SPREAD 라는 쉬운 방법이 있습니다. 모든 매개 변수를 전달하는 대신 다음을 작성하십시오.

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

답변

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

이것은 안티 패턴입니다. 나중에 올바른 propTypes를 확인할 수 없다는 의미이기 때문입니다. 이는 propTypes 오류가 암호화 스택 추적으로 끝나는 것을 의미합니다.

소품은 불변으로 간주해야합니다. props 객체를 다른 곳에서 변경하면 예기치 않은 결과가 발생할 수 있으므로 이상적으로는이 시점에서 고정 된 객체가됩니다.

스프레드 속성
이제 스프레드 속성 이라는 새로운 JSX 기능을 사용할 수 있습니다.

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

전달한 객체의 속성이 구성 요소의 소품에 복사됩니다.

이를 여러 번 사용하거나 다른 속성과 결합 할 수 있습니다. 사양 순서가 중요합니다. 이후의 속성은 이전의 속성보다 우선합니다.

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

이상한 … 표기법은 무엇입니까?
… 연산자 (또는 스프레드 연산자)는 이미 ES6의 어레이에 대해 지원됩니다. Object Rest 및 Spread Properties에 대한 ECMAScript 제안도 있습니다. JSX에서보다 명확한 구문을 제공하기 위해 이러한 지원 및 개발 표준을 활용하고 있습니다.

답변

파이썬 세계에서 온 사람들의 경우 JSX Spread Attributes는
Unpacking Argument Lists (Python- **operator)와 같습니다.

나는 이것이 JSX 질문이라는 것을 알고 있지만 유추 작업을하면 때로는 더 빨리 얻는 데 도움이됩니다.