难以理解JSX传播运算符

Question

在React文档中给出以下示例代码：

var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;

我做了一些调查...props，最终得出的结果是：

React.__spread({}, props)

进而得出{foo: x, bar: y}。

但是我想知道的是，为什么我不能这样做：

var component = <Component props />;

我看不出点差运算符的含义是什么。

Answer 1

这有助于使您的代码更简洁-由于props是对象，所以散布运算符会将传入的对象的 属性 应用到组件中。因此，该Component的属性a
foo的值为，x而a bar的值为y。

它将与以下内容相同：

var component = <Component foo={props.foo} bar={props.bar} />;

短一点