React에서 "..." 의 역할

 

질문 : React에서이 세 점은 무엇을합니까?

---

... 이 React (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 에서 '소유'속성이므로 스프레드에 포함됩니다. 따라서 이것이 나타나는 구성 요소에 자식 요소가 있으면 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 "updated" a 속성을 제외하고 foo 와 동일한 속성을 가진 새 개체로 대체됩니다.

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

출처 : https://stackoverflow.com/questions/31048953/what-do-these-three-dots-in-react-do