JSX에서의 곱슬머리 괄호를 사용한 Const 선언

JSX에서의 곱슬머리 괄호를 사용한 Const 선언

이제 막 React Native를 시작하고 JSX 구문에 익숙해졌습니다.내가 말하는 게 그런 거야?아니면 TypeScript를 말하는 건가요?아니면... ES6?아무튼...

난 이걸 본 적 있어.

const { foo } = this.props;

클래스 함수 내부.곱슬머리 교정기의 용도는 무엇이며, 사용하는 것과 사용하지 않는 것의 차이점은 무엇입니까?

그것은 과제를 파괴하는 것이다.

destructing assignment 구문은 배열 또는 객체의 속성을 개별 변수로 언팩할 수 있는 JavaScript 표현식입니다.

예(ES6):

var person = {firstname: 'john', lastname: 'doe'};

const firstname = person.firstname;
const lastname = person.lastname;

// same as this
const { firstname, lastname } = person;

자세한 내용은 MDN을 참조하십시오.

편집: 또한 Python 언어에 익숙한 개발자들에게 Python 언팩 구문을 비교하는 것은 흥미로울 수 있습니다.Python 2.7:

>>> _tuple = (1, 2, 3)
>>> a, b, c = _tuple
>>> print(a, b, c)
(1, 2, 3)

PEP 3132와 같은 Python3의 새로운 기능을 사용하여 다음을 수행할 수도 있습니다.

>>> _range = range(5)
>>> a, *b, c = _range
>>> print(a, b, c)
0 [1, 2, 3] 4

다른 언어의 유사한 접근 방식을 이미 알고 있으면 JS 아이디어를 더 빨리 파악할 수 있기 때문에 예가 추가됩니다.

네, ECMASCRIPT 6의 할당 기능을 파괴하고 있습니다.

예:

const { createElement } = React
const { render } = ReactDOM

const title = createElement('h1', {id: 'title', className: 'header'}, 'Hello World')

render(title, document.getElementById('react-container'))

여기 ^

React == { 
  cloneElement  : function(){ ... },
  createElement : function(){ ... },
  createFactory : function(){ ... }, 
... }

언급URL : https://stackoverflow.com/questions/38767531/declaring-const-with-curly-braces-in-jsx