web-dev-qa-db-ja.com

JSXで中括弧を使用したconstの宣言

Reactネイティブで、JSX構文に慣れています。それが私が話していることですか？それともTypeScriptについて話しているのですか？または... ES6？とにかく.. 。

私はこれを見た：

const { foo } = this.props;

クラス関数の内部。中括弧の目的は何ですか？それらを使用することと使用しないことの違いは何ですか？

react-jsxjsx
20
Varrick

破壊的代入 です。

構造化代入構文は、配列からの値、またはオブジェクトからのプロパティを個別の変数にアンパックできるようにする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解凍構文と比較するのは興味深いかもしれません。Python2.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のアイデアをより迅速に把握できるためです。

21
wolendranh

はい、これは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(){ ... }, 
... }
0
Apoorv