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

Answer 2

这个问题很可能是一个转贴：What do {curly braces} around javascript variable name mean

但作为答案，它是destructuring assignment。如果传入的对象镜像了引用的变量，则可以在赋值期间检索该特定字段。

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

2 个答案: