React에서 이 세 개의 점은 무엇을 합니까?

이 React(JSX 사용) 코드에서 무엇 ...을 하고 무엇이라고 합니까?

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

 

 

그것이 재산 스프레드 표기법 입니다. ES2018에 추가되었지만(배열/이터러블에 대한 확산은 이전, ES2015), 트랜스파일을 통해 오랫동안 React 프로젝트에서 지원되었습니다(" JSX 확산 속성 "으로 속성뿐만 아니라 다른 곳에서도 할 수 있음에도 불구하고 ).

{...this.props} 생성 중인 요소 props의 개별 속성으로 "자신의" 열거 가능한 속성을 퍼뜨 립니다 . Modal예를 들어, 및 가 this.props포함된 경우a: 1b: 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여는 태그에 속성을 넣기 위한 좋은 종류의 구문 설탕일 뿐입니다.