在函数参数中围绕变量的花括号是什么意思

Question

我在包上看到了这段代码:

const SortableList = SortableContainer(({items}) => {
 return (
     <ul>
        {items.map((value, index) =>
            <SortableItem key={`item-${index}`} index={index} value={value} />
        )}
    </ul>
 );
});

items通过在函数参数中将花括号括起来会发生什么？

Answer 1

这是解构赋值语法.

另一个例子,以下两行代码是相同的:

const { items } = args

const items = args.items

简而言之,它是一种访问给定变量的特定字段的简化方法,以便在该范围内进一步使用.

在您的原始示例中,它声明了一个变量items,以便在函数体中使用,该变量是items第一个参数的字段.

const SortableList = SortableContainer(({items}) => {
    // do stuff with items here

等于

const SortableList = SortableContainer((input) => {
    const items = input.items
    // do stuff with items here