Declaring Const With Curly Braces in JSX

问题

I'm just getting started with React Native and getting used to JSX syntax. Is that what I'm talking about? Or am I talking about TypeScript? Or... ES6? Anyway...

I've seen this:

const { foo } = this.props;

Inside a class function. What is the purpose of the curly braces and what's the difference between using them and not using them?

回答1:

It is destructuring assignment.

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

Example (ES6):

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

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

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

You can find more info at MDN

EDIT: also for developers familiar with Python language it can be interesting to compare with Python unpacking syntax. Python2.7:

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

With new feature of Python3, like PEP 3132 you can also do following:

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

Examples are added, because knowing already similar approach from other languages you can grasp JS idea more quicker.

回答2:

Yes this is destructuring assignment feature of ECMASCRIPT 6

For Example :

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

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

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

here ^

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

来源：https://stackoverflow.com/questions/38767531/declaring-const-with-curly-braces-in-jsx

标签

react-jsx

jsx