Thắc mắc về reactJS

ri_wan_funny · January 14, 2022, 6:30am

Xin chào,
cho mình hỏi cú pháp này là gì ?

var {xyz, kmn, abc} = this.props là gì ?

VD : var { product, index, item, user } = this.props

Mình bị hỏng kiến thức, mong được các bạn giải thích và cho keyword để mình search google. Cảm ơn

tonghoangvu · March 3, 2021, 3:22am

Object destructuring, cú pháp này của Javascript nhé.

rogp10 · June 6, 2022, 9:56am

<properties> ::= (<property_name>|<property_name>:<alias>,)+
<unpack> ::= "{"<properties>"}"
// Kết quả trong <alias> hay <property_name> nếu không dùng <alias>

Ví dụ:

for {name} of persons:

Hoặc:

for {firstName: firstName, surname} of employees:

ri_wan_funny · January 14, 2022, 6:33am

const a = {
    b: 1,
    c: {
        d: 2,
        e: {
            f: 3
        }
    }
}
const { c: { e: { f : g } } } = a
console.log(g) //3

Trong đoạn code trên mình destructuring object a sau đó đặt lại tên thuộc tính f là g theo hướng dẫn này

Vậy bây giờ mình muốn đặt lại tên c và e trong const {c:{e:{f:g}}} = a thì phải làm sao?

utherpally · January 14, 2022, 7:41am

Hình như là ko có support vừa destructuring vừa rename đâu, mà có như vậy thì nhìn vào cú pháp cũng rối và còn khó đọc để hiểu hơn trong trường hợp của bạn.

Cứ tách ra mà viết thôi.

const h = a.c;
const {e:z} = h;

qloved · January 14, 2022, 3:48pm

c, e ở đây đóng vai trò là path access chứ có phải biến sau khi destruct đâu, nên không thể rename được. Proof là không hề có variable c, e được tạo ra