ecmascript-6 - 无法理解 JSX 扩展运算符

Question

这个问题已经有答案了:

What are these three dots in React doing? (23 个回答)

已关闭 2 年前。

鉴于 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 是一个对象，展开运算符会获取您传入的对象的属性并将其应用到组件。因此，该组件将具有值为 x 的 foo 属性和值为 y 的 bar 属性。

它与以下内容相同:

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

短一点