Es2015的卷曲手柄

Question

我正在阅读一些推文,我在Dan Abromov发现了这条推文

语法让我感到困惑.

const Font = ({ children }) => 
 <Block...

围绕孩子的{}有什么意义？显然它不是一个对象.我推测它的ES2015功能.

非常感谢

Answer 1

这是一种解构结合模式.它表示该参数children应绑定到children传递给该函数的对象的属性值.

在ES2015环境中试试这个:

function x({ foo }) {
  console.log(foo);
}

x({ hello: "world", foo: "bar", well: "that's all"});

字符串"bar"将被记录到控制台,因为这是传递给函数的对象的"foo"属性的值.

如果传递给函数的值是没有"children"属性的对象,如果它根本不是对象,那么参数将是undefined.