在JSX中用花括号声明const [英] Declaring Const With Curly Braces in JSX

问题描述

我刚刚开始使用React Native并习惯了JSX语法.这就是我在说的吗?还是我在谈论TypeScript?还是... ES6?反正...

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...

我已经看到了:

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?

推荐答案

它是解构分配

解构赋值语法是一个JavaScript表达式， 使从数组解压缩值或从解压缩属性成为可能 对象，分成不同的变量.

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

示例(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:

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)

借助Python3的新功能，例如 PEP 3132 ，您还可以以下:

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

添加了示例，因为从其他语言了解已经很相似的方法，您可以更快地掌握JS的想法.

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

这篇关于在JSX中用花括号声明const的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！